動的列の追加primeNG角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