Angular 7 Mapping объект с массивом объекта в матовую таблицу - PullRequest
Новая
       35

Angular 7 Mapping объект с массивом объекта в матовую таблицу

2 голосов
/ 13 марта 2019

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

Входной объект из Web 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);
      });
  }

Ожидаемый результат: dateReport содержит дату, которая используется в качестве имени столбца в таблице.'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 |
|______________________________________________________________|

Проблема:

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

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

1 Ответ

1 голос
/ 14 марта 2019

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

dataSource = new ShoppingListModel(... default data)

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

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

...