angular - 如何在 Angular2 中用 Array<Object> 填充 PrimeNG DataTable？

Question

我有一个对象数组(称为设备)，它们是在 POST 方法期间从 API 获取的。 当我尝试将其填充到一个简单的 html 表格中时，它起作用了:

<table class="table table-striped">
  <thead>
    <tr>
      <th *ngFor="let property of devices[0] | keys">{{property.key}}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let device of devices">
      <td *ngFor="let property of device | keys">{{property.value == null ? '---' : property.value.toString()}}</td>
    </tr>
  </tbody>
</table>

我还使用自定义管道来显示对象的每个属性的键和值:

@Pipe({ name: 'keys' })
export class KeysPipe implements PipeTransform {
  transform(value, args: string[]): any {
    let keys = [];
    for (let key in value) {
      if (value.hasOwnProperty(key)) {
        keys.push({ key: key, value: value[key] });
      }
    }
    return keys;
  }
}

但是当我尝试对 PrimeNG DataTable 执行相同操作时，它没有显示任何内容:

<p-dataTable var="device" [value]="devices" sortMode="multiple">
   <p-column *ngFor="let property of device | keys" field="{{property.value == null ? '---' : property.value.toString()}}" header="{{property.key}}" [sortable]="true"></p-column>
</p-dataTable>

我错过了什么/做错了什么？

Answer 1

看起来问题是我没有填写标题，所以 PrimeNG 不知道如何处理数据。

<p-dataTable [value]="devices">
  <p-column *ngFor="let header of headers" [field]="header.field" [header]="header.header"></p-column>
</p-dataTable>

这是从数组的第一个对象中提取的标题的填充(我的数组中的所有对象都具有相同的属性，只是具有不同的值):

public headers = [];

FillHeaders(devices) {
  for (let property in devices[0]) {
    if (devices[0].hasOwnProperty(property)) {
      this.headers.push({ field: property, header: property });
    }
  }
}