Блог

Я пытаюсь сопоставить один из моих объектов с mat-table .

Входной объект из веб-API выглядит следующим образом:

 [
    {
        "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-код

 <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>
  

Угловая модель:

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

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

Угловой код:

 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);
      });
  }
  

Ожидаемый результат: Отчет о дате содержит дату, которая используется в качестве имен столбцов в таблице. ‘n’ приведенная ниже структура означает, что webapi может возвращать более 2 ShoppingListDateModel, и в этом случае столбец должен быть добавлен для каждой даты

 ________________________________________________________________
| 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 |
|______________________________________________________________|
  

Проблема:

Не удается сгенерировать столбец на основе dateRecord. Пользовательский интерфейс отображает только первые два столбца.

Я новичок в Angular. В случае, если мое выполнение неверно, пожалуйста, дайте мне знать, и я смогу изменить его на основе входных данных.

Вероятно, это связано с тем, что dataSource не определено при инициализации вашего компонента. Вы только что указали для него тип. Итак, один из способов — выполнить

 dataSource = new ShoppingListModel(... default data)
  

тогда он не будет неопределенным.

Другой способ — добавить, что *ngFor="let row;let item of row?.dateReport" ? не будет выдавать ошибку, если row значение не определено.