如何使prime-ng数据表在角度4中变为动态?

时间:2017-10-04 13:45:35

标签: angular primeng primeng-datatable

我使用prime ng primeface在角度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> 

但是我想在这里动态显示数据表。即列数不会被修复。所以我的表应该接受,即使它是一个列,也可以是任意数量的列。怎么可能?

1 个答案:

答案 0 :(得分:0)

试试这样:

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>