2

我正在尝试将我的一个对象映射到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 |
|______________________________________________________________|

问题：

无法根据 dateRecord 生成列。UI 仅呈现前两列。

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

4

1 回答 1

1

dataSource这可能是由于组件的 init 上未定义的事实。您刚刚为它指定了一个类型。所以其中一种方法是做一个

dataSource = new ShoppingListModel(... default data)

那么它就不会是未定义的。

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

于 2019-03-13T21:33:02.100 回答