angular - 如何使prime-ng数据表在角度4中动态化？

Question

我使用 prime ng primeface 创建了 angular 4 中的数据表。我能够从远程服务器绑定表。我已经给出了列名和标题，例如

{ field: 'StudentId', header: 'Student Code' },
      { field: 'Dept', header: 'Department' },
      { field: 'PassoutYear', header: 'Passout Year' }, 

和 Html 会像

 <p-dataTable #dt [value]="Studentlist" exportFilename="Studentlist" reorderableColumns="true" resizableColumns="true" columnResizeMode="expand" selectionMode="single" [(selection)]="selectedCar" (onRowSelect)="onRowSelect($event)" [responsive]="true" [rows]="8" [paginator]="true"   scrollHeight="300px">
        <p-header>STUDENT RECORDER</p-header>
        <p-header>
            <div style="text-align:left">
                <p-multiSelect [options]="columnOptions" [(ngModel)]="cols"></p-multiSelect>
            </div>
        </p-header>

        <p-column *ngFor="let col of cols" [field]="col.field" [header]="col.header" [sortable]="true" [filter]="true" [editable]="true" filterMatchMode="startsWith" filterPlaceholder="Search"></p-column> 

但是这里我想动态显示数据表。即列数将不固定。因此，即使它是单列或任意数量的列，我的表也应该接受。怎么可能？

Answer 1

试试这样：

this.Studentlist = [{
    StudentId: 1000230,
    Dept: 'Computer Science',
    PassoutYear: 2017
}]

this.cols = [{
    field: 'StudentId',
    header: 'Student Code'
}, {
    field: 'Dept',
    header: 'Department'
}, {
    field: 'PassoutYear',
    header: 'Passout Year'
}]

<p-dataTable [value]="Studentlist">
    <p-column class="a" *ngFor="let col of cols" [field]="col.field" [header]="col.header"></p-column>
</p-dataTable>