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的。尝试使用dataSource创建DATA.products。

Answer 2

您当前正在将数据源指向需要数组的对象。因此，简单的实现可能是（在.component.ts中）：

dataSource = DATA["products"]

Answer 3

尝试使用它，对我有用

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

然后将以下内容添加到ngOniInit（）

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

无法正确插值数据-Angular材质表-Angular2 +

3 个答案: