无法正确插值数据-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);
}