添加動態列primeNG Angular 2.爲數組中的每個對象創建列

Question

我有一個我想要在primeng數據表中顯示的人員列表。 person對象具有此字段（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。這裏的鏈接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