Angular 7将对象与对象数组映射到mat表 [英] Angular 7 Mapping object with array of object to mat table

问题描述

我正在尝试将我的对象之一映射到mat-table.

I am trying to map one of my object to 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可能返回两个以上的ShoppingListDateModel，在这种情况下，应为每个日期添加该列

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

问题:

无法基于dateRecord生成列.用户界面仅呈现前两列.

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

我是Angular的新手.如果我的执行有误，请告诉我，我可以根据输入进行修改.

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

推荐答案

这可能是由于在组件的初始化中未定义dataSource的事实.您刚刚为其指定了一种类型.因此，一种方法是进行

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.

另一种方法是添加*ngFor="let row;let item of row?.dateReport"，如果row未定义，则?不会引发错误.

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.

这篇关于Angular 7将对象与对象数组映射到mat表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！