Duplicate column definition [object Object] Mat-table

Question

I'm creating mat-table which contain row with nested type data.

Value is constructed as an array of string objects. The goal is to assign each of these objects to separate columns.

Objects construction:

weeks: [{week: '1'},{week: '0'},{week: '3'},{week: '4'},{week: '5'}]

Creating columns and assigning data:

<ng-container matColumnDef="{{wk}}" *ngFor="let wk of weekHeaders; index as idx">
       <mat-header-cell *matHeaderCellDef>
        <div fxLayout="column">
          <div class="mt-05">{{wk.header}}</div>
          <div *ngIf="wk.weekNo" >{{wk.startDate | date: 'dd-MM-yyyy'}}</div>
          <div *ngIf="wk.weekNo">{{wk.endDate | date: 'dd-MM-yyyy'}}</div>
        </div>
       </mat-header-cell>
       <mat-cell *matCellDef="let row;"> {{row.weeks[idx].week}} </mat-cell>
</ng-container>

I was expected something like that:

week1 - assigned value = 1

week2 - assigned value = 0

week3 - assigned value = 3

...

But I'm getting the following error:

Duplicate column definition name provided: "[object Object]".

EDIT:

Interface:

export interface DataTable {
    type: string;
    process: string;
    weeks: {week:String}[];
    finalWeek: number;
  }

Column setting:

<mat-header-row *matHeaderRowDef="detailedColumns" class="plan-header-row"></mat-header-row>
<mat-row *matRowDef="let row; columns: detailedColumns;">
</mat-row>

The error is because you defined the "displayedColumns" in your line <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> -not in code- as an array of objects, and this must be an array of strings. Sure you can use some similar to displayedColumns=this.yourArray.map(x=>x.your_property_related_column_name), but it's imposible know it without more data — Eliseo

Krzysztof Gruszka Krzysztof Gruszka · Accepted Answer · 2019-08-28T07:28:18

Problem solved. matColumnDef="{{wk}}" this element was waiting for string and I was giving him object. The only thing need to give him string in way like that matColumnDef="{{wk.header}}" Thanks Eliseo for tips.

Duplicate column definition [object Object] Mat-table

1 Answers