Wie macht man die Prime-ng-Datentabelle in Winkel 4 dynamisch?

Question

Ich habe eine Datentabelle in Winkel 4 mit Prime ng Primeface erstellt. Ich bin in der Lage, die Tabelle vom Remote-Server zu binden. Ich habe den Spaltennamen und Header wie

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

gegeben und Html werden wie

<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> 

Aber hier möchte ich dynamisch die Datentabelle angezeigt werden soll. I.e. Die Anzahl der Spalten wird nicht festgelegt. Also sollte mein Tisch akzeptieren, auch wenn es eine einzelne Spalte oder eine beliebige Anzahl von Spalten ist. Wie ist das möglich?

Answer 1

Versuchen wie folgt aus:

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>