[英]Using Angular6 Mat-Table dynamically
我正在開發一個Angular應用,該應用需要顯示從API檢索的數據。 因為我不確切知道要檢索什么數據,而且這是我需要用於不同表的模型,所以我需要使它既動態生成列,也填充每個單元格。
我檢索並需要在表中打印的JSON與此類似:
[
{
"attributes": [],
"brandReference": "f805a08df4c236ddb431e14a38419690",
"computedPOS": "BEXFY_HEADQUARTERS",
"deviceType": 1,
"friendlyName": "BEXFY_TRANSPARENT_LED",
"id": "953e9414d7a51e8-e0-681def0b02b5",
"isMonitored": true,
"location": "entrance",
"posReference": "78fcef0f12993d52b2d2906dc4ce48d8",
"timetable": [],
"timezone": "Europe/Madrid"
},
{
"attributes": [],
"brandReference": "185fd549-4410-462b-a610-fe6b61c91cf6",
"comments": "",
"computedPOS": "BEXFY_HEADQUARTERS",
"deviceType": 1,
"friendlyName": "BEXFY_AUDIO_OFICINA",
"id": "79eaa7f5f6603809-e0-681def0b0290",
"location": "",
"posReference": "78fcef0f12993d52b2d2906dc4ce48d8",
"timetable": [],
"timezone": "Europe/Madrid"
},
{
"attributes": [],
"brandReference": "185fd549-4410-462b-a610-fe6b61c91cf6",
"comments": "",
"computedPOS": "BEXFY_HEADQUARTERS",
"deviceType": 1,
"friendlyName": ".BEXFY_AUDIO_ADRI",
"id": "97bf675e3e237bcd-e0-681def0b029f",
"location": "",
"posReference": "78fcef0f12993d52b2d2906dc4ce48d8",
"timetable": [],
"timezone": "Europe/Madrid"
}
]
請注意,對象屬性鍵可能會更改,因此我無法對諸如element.friendlyName之類的內容進行硬編碼。 我收到應通過如下所示的數組使用的鍵名。
["friendlyName", "computedPOS", "location"]
因此,為了使其正常工作,我做了類似的事情。
<table mat-table [dataSource]="dataSource.data" class="mat-elevation-z8" style="width:90%;margin:0 auto;">
<ng-container *ngFor="let column of modelCols; let colIndex = index" matColumnDef={{nameCols[colIndex]}}>
<th mat-header-cell *matHeaderCellDef> {{nameCols[colIndex]}}</th>
{{log(modelCols)}}
<div *ngFor="let column of modelCols;">
<td mat-cell *matCellDef="let element">
{{log(element[column])}}
{{element[column]}}
</td>
</div>
</ng-container>
<tr mat-header-row *matHeaderRowDef="nameCols"></tr>
<tr mat-row *matRowDef="let row; columns: nameCols;"></tr>
</table>
這樣做的問題是,它導致在該行的每一列上重復第一個值(“ friendlyName”)。 這樣的事情。
雖然預期的工作方式是這樣的:
您需要遍歷nameCols
才能顯示動態列。 API要求您顯示的任何列都是您要迭代以顯示您的列的全部。 由於您正在使用element[column]
在行中顯示項目。 它只會顯示所需的項目。
<ng-container *ngFor="let column of nameCols; let colIndex = index" [matColumnDef]="column">
<th mat-header-cell *matHeaderCellDef>{{column}}</th>
<td mat-cell *matCellDef="let element">{{element[column]}}</td>
</ng-container>
這是在StackBlitz上使用數據的有效示例。 這樣,即使要從API顯示一組不同的列,您所需要做的就是更新nameCols
以顯示正確的列。 模板將處理其余部分,並在顯示的列中顯示關聯的數據。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.