無法正確插值數據-Angular材質表-Angular2 +

Question

我無法弄清楚如何修改示例材料數據表，以便可以在其中使用自己的數據...

我的數據以以下格式顯示：

export const DATA: any = {
  'products': [
    {
      'id': 1,
      'name': 'SOLID BB T-SHIRT',
      'price': '28.00',
      ...
    },
...
]

從Material.angular.io給出的示例中，其數據采用以下格式：

export const DATA = [
  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    ...
  },
  ...
]

但是，我似乎無法使我的數據格式適合插值以便在HTML中使用，如下所示：

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
   <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef> id </th>
    <td mat-cell *matCellDef="let element"> {{element.id}} </td>
  </ng-container>

我有什么想念的嗎？

Answer 1

尚不清楚，因為您沒有提供用於創建dataSource代碼，但我的猜測是您在此處傳遞Object而不是Array 。 嘗試使用DATA.products創建dataSource DATA.products 。

Answer 2

您當前正在將數據源指向需要數組的對象。 因此，簡單的實現可能是（在.component.ts中）：

dataSource = DATA["products"]

Answer 3

嘗試使用它，對我有用

import { MatTableDataSource } from '@angular/material';

然后將以下內容添加到ngOniInit（）

ngOnInit() {
   this.dataSource = new MatTableDataSource(DATA);
}