添加动态列 primeNG Angular 2. 为数组中的每个对象创建列
Adding a dynamic column primeNG Angular 2. Make column for each object in the array
我有一个要在 primeng 数据表中显示的人员列表。人员对象具有此字段(firstName、lastName、continentsVisited)。 continentVisited 字段是该人访问过的大陆的数组。这个 continentsVisited 是动态的。除了 firstName 和 lastName 之外,我想要的是为访问过的每个大陆设置一个单独的列。
export class AppComponent {
persons: any [] = [
{"firstName": "paolo","lastName":"revira","continentsVisited": [
{ "continent":"Europe", "name": "UK" },
{ "continent":"Asia", "name": "China" },
{ "continent":"North America", "name": "US" }
]},
{"firstName": "kenneth","lastName":"santos"},"continentsVisited": [
{ "continent":"Europe", "name": "France" },
{ "continent":"Asia", "name": "Japan" },
{ "continent":"North America", "name": "Canada" }
]},
{"firstName": "chris","lastName":"kenndy"},,"continentsVisited": [
{ "continent":"Europe", "name": "Germany" },
{ "continent":"Asia", "name": "Philippines" },
{ "continent":"North America", "name": "Mexico" }
]},
];
ngOnInit() {
}
}
<p-dataTable [value]="persons" [editable]="true" resizableColumns="true" reorderableColumns="true">
<p-column field="firstName" header="First Name" [editable]="true"></p-column>
<p-column field="lastName" header="Last Name"></p-column>
</p-dataTable>
我为此创建了一个 plunkr。这是 link https://plnkr.co/edit/gS1wsI?p=preview
您可以使用下面的代码,
<p-dataTable [value]="persons">
<p-column *ngFor="let col of cols" [field]="col.field" [header]="col.header"></p-column>
</p-dataTable>
打字稿代码
export class App {
name:string;
value:any;
persons: any [] = [
{"firstName": "paolo","lastName":"revira","continentsVisited": [
{ "continent":"Europe", "name": "UK" },
{ "continent":"Asia", "name": "China" },
{ "continent":"North America", "name": "US" }
]},
{"firstName": "kenneth","lastName":"santos","continentsVisited": [
{ "continent":"Europe", "name": "France" },
{ "continent":"Asia", "name": "Japan" },
{ "continent":"North America", "name": "Canada" }
]},
{"firstName": "chris","lastName":"kenndy","continentsVisited": [
{ "continent":"Europe", "name": "Germany" },
{ "continent":"Asia", "name": "Philippines" },
{ "continent":"North America", "name": "Mexico" }
]}
];
cols:any[]=[];
constructor() {
Object.keys(this.persons[0]).forEach(item=>{
console.log(item)
this.cols.push({field: item, header: item});
})
console.log(this.cols );
this.name = `Angular Prime Data table Dynamic columns`
}
更新 1:基于屏幕截图
HTML 看起来像
<p-dataTable [value]="newPersons">
<p-column *ngFor="let col of cols" [field]="col.field"
[header]="col.header"></p-column>
</p-dataTable>
打字稿代码:
for(let i =0 ; i <this.persons.length;i++){
let temp={
firstName : this.persons[i].firstName,
lastName : this.persons[i].lastName
}
this.persons[i].continentsVisited.forEach(item=>{
let keyValue = Object.values(item);
console.log(keyValue)
temp[keyValue[0].toString()] = keyValue[1]
}
this.newPersons.push(temp);
}
console.log(this.newPersons)
Object.keys(this.newPersons[0]).forEach(item=>{
this.cols.push({field: item, header: item});
})
注意:在下面的演示中更新
我有一个要在 primeng 数据表中显示的人员列表。人员对象具有此字段(firstName、lastName、continentsVisited)。 continentVisited 字段是该人访问过的大陆的数组。这个 continentsVisited 是动态的。除了 firstName 和 lastName 之外,我想要的是为访问过的每个大陆设置一个单独的列。
export class AppComponent {
persons: any [] = [
{"firstName": "paolo","lastName":"revira","continentsVisited": [
{ "continent":"Europe", "name": "UK" },
{ "continent":"Asia", "name": "China" },
{ "continent":"North America", "name": "US" }
]},
{"firstName": "kenneth","lastName":"santos"},"continentsVisited": [
{ "continent":"Europe", "name": "France" },
{ "continent":"Asia", "name": "Japan" },
{ "continent":"North America", "name": "Canada" }
]},
{"firstName": "chris","lastName":"kenndy"},,"continentsVisited": [
{ "continent":"Europe", "name": "Germany" },
{ "continent":"Asia", "name": "Philippines" },
{ "continent":"North America", "name": "Mexico" }
]},
];
ngOnInit() {
}
}
<p-dataTable [value]="persons" [editable]="true" resizableColumns="true" reorderableColumns="true">
<p-column field="firstName" header="First Name" [editable]="true"></p-column>
<p-column field="lastName" header="Last Name"></p-column>
</p-dataTable>
我为此创建了一个 plunkr。这是 link https://plnkr.co/edit/gS1wsI?p=preview
您可以使用下面的代码,
<p-dataTable [value]="persons">
<p-column *ngFor="let col of cols" [field]="col.field" [header]="col.header"></p-column>
</p-dataTable>
打字稿代码
export class App {
name:string;
value:any;
persons: any [] = [
{"firstName": "paolo","lastName":"revira","continentsVisited": [
{ "continent":"Europe", "name": "UK" },
{ "continent":"Asia", "name": "China" },
{ "continent":"North America", "name": "US" }
]},
{"firstName": "kenneth","lastName":"santos","continentsVisited": [
{ "continent":"Europe", "name": "France" },
{ "continent":"Asia", "name": "Japan" },
{ "continent":"North America", "name": "Canada" }
]},
{"firstName": "chris","lastName":"kenndy","continentsVisited": [
{ "continent":"Europe", "name": "Germany" },
{ "continent":"Asia", "name": "Philippines" },
{ "continent":"North America", "name": "Mexico" }
]}
];
cols:any[]=[];
constructor() {
Object.keys(this.persons[0]).forEach(item=>{
console.log(item)
this.cols.push({field: item, header: item});
})
console.log(this.cols );
this.name = `Angular Prime Data table Dynamic columns`
}
更新 1:基于屏幕截图
HTML 看起来像
<p-dataTable [value]="newPersons">
<p-column *ngFor="let col of cols" [field]="col.field"
[header]="col.header"></p-column>
</p-dataTable>
打字稿代码:
for(let i =0 ; i <this.persons.length;i++){
let temp={
firstName : this.persons[i].firstName,
lastName : this.persons[i].lastName
}
this.persons[i].continentsVisited.forEach(item=>{
let keyValue = Object.values(item);
console.log(keyValue)
temp[keyValue[0].toString()] = keyValue[1]
}
this.newPersons.push(temp);
}
console.log(this.newPersons)
Object.keys(this.newPersons[0]).forEach(item=>{
this.cols.push({field: item, header: item});
})
注意:在下面的演示中更新