如何在 Angular2 中用 Array<Object> 填充 PrimeNG DataTable?
How to fill PrimeNG DataTable with Array<Object> in Angular2?
我有一个对象数组(称为 devices),我在 POST 方法期间从 API 获得这些对象。
当我尝试用简单的 html table 填充它时,它有效:
<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>
我missing/doing哪里错了?
看来问题是我没有填写 headers,所以 PrimeNG 不知道如何处理这些数据。
<p-dataTable [value]="devices">
<p-column *ngFor="let header of headers" [field]="header.field" [header]="header.header"></p-column>
</p-dataTable>
这是从数组的第一个 object 中提取的 headers 的填充(我的数组中的所有 object 都具有相同的属性,只是具有不同的值):
public headers = [];
FillHeaders(devices) {
for (let property in devices[0]) {
if (devices[0].hasOwnProperty(property)) {
this.headers.push({ field: property, header: property });
}
}
}
我有一个对象数组(称为 devices),我在 POST 方法期间从 API 获得这些对象。 当我尝试用简单的 html table 填充它时,它有效:
<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>
我missing/doing哪里错了?
看来问题是我没有填写 headers,所以 PrimeNG 不知道如何处理这些数据。
<p-dataTable [value]="devices">
<p-column *ngFor="let header of headers" [field]="header.field" [header]="header.header"></p-column>
</p-dataTable>
这是从数组的第一个 object 中提取的 headers 的填充(我的数组中的所有 object 都具有相同的属性,只是具有不同的值):
public headers = [];
FillHeaders(devices) {
for (let property in devices[0]) {
if (devices[0].hasOwnProperty(property)) {
this.headers.push({ field: property, header: property });
}
}
}