Question

我有一个我希望在primeng数据表中显示的人员列表。 person对象具有此字段（firstName，lastName，continentsVisited）。 continentVisited field是一个人访问过的大陆阵列。这个大陆访问是动态的。我想要的是除了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>

我为此创造了一个傻瓜。这是链接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

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

1 个答案: