각도 다음 형태

Question

서버 API 데이터를 반환 다차원 배열의 DataTable 2 PrimeNG 빌드 : rows의 각 요소를 포함하는 배열 인 반면

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

cols 배열 헤더 이름을 포함 일부 값은 다음과 같습니다.

PrimeNG DataTa를 빌드해야합니다. 수신 된 데이터를 사용하여 전송할 수 있지만 문서에는 그러한 예가 없습니다. 어떻게해야합니까?

Answer 1

당신 같은 백엔드에서 가져온 데이터가 상상 :

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

첫째, 당신이 백엔드 데이터에서 동적으로 PrimeNG 열을 만들어야합니다 그런 다음

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

, 당신은 데이터를 입력해야 (백엔드 행 데이터의 각 행을 반복하여) PrimeNG 데이터 테이블의 경우 :

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

마지막으로 그냥보기로 데이터를 연결 :

여기

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

가 작동 Plunker

입니다 당신을 위해 그 됐나요?