Angular 7 Mapping object with array of object to m

Question

I am trying to map one of my object to mat-table.

Input object from Web API is as follows:

[
    {
        "inventoryId": 1004,
        "inventoryName": "Red Shirt  Material",
        "dateReport": [
            {
                "date": "2019-03-04T19:15:16.828",
                "quantity": 109.9
            },
            {
                "date": "2019-03-09T10:36:12.198",
                "quantity": 26.6
            }
        ]
    },
    {
        "inventoryId": 1003,
        "inventoryName": "Blue Pant Material",
        "dateReport": [
            {
                "date": "2019-03-04T19:15:16.828",
                "quantity": 64.4
            },
            {
                "date": "2019-03-09T10:36:12.198",
                "quantity": 8
            }
        ]
    }
]

HTML code

<table mat-table [dataSource]="dataSource" matSort>

      <ng-container matColumnDef="sn">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>S.No.</th>
        <td mat-cell *matCellDef="let row; let i = index">{{ i + 1 }}</td>
      </ng-container>

      <ng-container matColumnDef="InventoryName">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
        <td mat-cell *matCellDef="let row">{{ row.inventoryName }}</td>
      </ng-container>

      <ng-template *ngFor="let row;let item of row?.dateReport" >
          <ng-container matColumnDef={{ item.date | date }}>
              <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ item.date | date }}</th>
              <td mat-cell *matCellDef="let srow">{{ item.quantity}}</td>
            </ng-container>
      </ng-template>
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
    </table>

Angular Model:

export class ShoppingListModel {
  inventoryId: number;
  inventoryName: string;
  dateReport: ShoppingListDateModel[] = [];
}

export class ShoppingListDateModel {
  date: Date;
  quantity: number;
}

Angular Code:

export class ShoppingListComponent implements OnInit {

dataSource: MatTableDataSource<ShoppingListModel>;
  displayedColumns = [
    'InventoryName',
    'Quantity',
    'InStock',
    // 'Diff',
    'UnitId'
  ];

  constructor(
    private reportService: ReportService
  ) {
  }


Search() {
    this.rService.getShoppingListReport(this.Params).subscribe(
      data => {
        this.dataSource = new MatTableDataSource(data);
      });
  }

Expected Output: The dateReport contains the date which is used as column names in the table. 'n' the below structure denotes that webapi may return more than 2 ShoppingListDateModel in which case the column should be added for each date

________________________________________________________________
| S.No |        Name        | 04-03-2019 | 09-03-2019 | .....n |
|______________________________________________________________|
|      |                    |            |            |        |
|  1   | Red Shirt Material |    109.9   |    26.6    | .....n |
|      |                    |            |            |        |
|  2   | Blue Pant Material |     64.4   |      8     | .....n |
|______________________________________________________________|

Problem:

Unable to generate column based on the dateRecord. The UI only renders only first two columns.

I am new to Angular. In case my execution is wrong kindly let me know and I can modify it based on input.

Answer 1

This is probably due to the fact that dataSource is undefined on the init of your component. You just specified a type for it. So one of the ways to go is to do a

dataSource = new ShoppingListModel(... default data)

then it won't be undefined.

Another way to go is to add *ngFor="let row;let item of row?.dateReport"the ? will not throw an error if the row is undefined.