Angular 2 PrimeNG bauen Datentabelle aus mehrdimensionales Array

Question

Die Server-API gibt Daten in der folgenden Form:

export interface Response { 
 
    cols: string[]; 
 
    rows: string[][]; 
 
}

cols Array Header-Namen enthält, während der jedes Element rows ein Array ist, enthaltend einige Werte, so das Beispiel der Antwort sieht so aus:

Ich muss den PrimeNG DataTa bauen Sie können empfangene Daten verwenden, aber in der Dokumentation gibt es kein solches Beispiel. Wie mache ich das?

Answer 1

Stellen Sie sich abgerufenen Daten aus dem Backend wie folgt aus:

this.backendData = { 
    cols:['name', 'Income last year'], 
    rows:[['Lionbridge', 150250], ['Locatech', 1085]] 
} 

Zuerst müssen Sie PrimeNG Spalten dynamisch aus diesen Backend-Daten erstellen:

this.cols = []; 
var i, row, obj; 
for(i=0;i<this.backendData.cols.length;i++) { 
    this.cols.push(this.constructColumn(this.backendData.cols[i])); 
} 

Dann müssen Sie die Daten füllen für die PrimeNG-Datentabelle wie folgt (durch Iteration auf jeder Zeile der Backend-Zeilen-Daten):

Schließlich assoziieren nur, dass die Daten zu der Ansicht:

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

Hier ist ein funktionierendes Plunker

Ist das ok für dich?