添加动态列 primeNG Angular 2. 为数组中的每个对象创建列

Question

我有一个要在primeng 数据表中显示的人员列表。 person 对象具有这些字段（firstName、lastName、continentsVisited）。 continentVisited 字段是人访问过的大陆数组。访问的这个大洲是动态的。我想要的是除了 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。这是链接https://plnkr.co/edit/gS1wsI?p=preview

Answer 1

你可以使用下面的代码，

<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});
})

注意：在下面的演示中更新

LIVE DEMO