首頁猿問角度 *ngFor 指令顯示視圖上的數據

角度 *ngFor 指令顯示視圖上的數據

JavaScript

慕的地8271018 2022-09-02 21:35:50

使用角度底漆 API 并遵循文檔API [ id: 1, name:"Test 1", currency: "Euro", status: "Active", date: "4th of April 2008" }, id: 2, name:"Test 2", currency: "Dollar", status: "Active", date: "12nd of May 2005" } ] ngOnInit { this.col = [ {field: 'name', header: 'Name'}, {field: 'currency', header: 'Currency'}, {field: 'status', header: 'Status'}, {field: 'date', header: 'Date'} ]}我可以使用 *ngFor 成功呈現數據Template.html<tr> <td *ngFor="let col of column"> {{rowData[col.field]}} </td><tr>現在我需要對每個數據值進行修改，例如：*名稱使用大寫管道*貨幣使用貨幣管道*日期使用日期管道<td *ngFor="let col of columne"> <ng-container *ngIf="col.field === 'date'"> {{rowData[col.field] | date: 'dd/MMM/yyyy'}}</ng-container> <ng-container *ngIf="col.field === 'currency'"> {{rowData[col.field] | currency:'CAD':'code'}}</ng-container> <ng-container *ngIf="col.field === 'name'"> {{rowData[col.field] | uppercase}}</ng-container></td>如何修改正在呈現的數據，并針對每個值進行相應的修改

查看完整描述

2 回答

慕容708150

TA貢獻1831條經驗獲得超4個贊

你可以通過使用以下方面來做一個邊際的改進：ngSwitch

<ng-container *ngFor="let col of columne">

<ng-container *ngSwitchCase="'date'"> {{rowData[col.field] | date: 'dd/MMM/yyyy'}}</ng-container>

<ng-container *ngSwitchCase="'currency'"> {{rowData[col.field] | currency:'CAD':'code'}}</ng-container>

<ng-container *ngSwitchCase="'name'"> {{rowData[col.field] | uppercase}}</ng-container>

<ng-container *ngSwitchDefault>{{rowData[col.field]}}</ng-container

</td>

</ng-container>

但是我建議使用一些組件庫，如果您需要具有這樣的動態列的表，則可以提供一個表。由于您的其他選項基本上涉及滾動您自己的可重用表組件，這可能有些大材小用。

反對回復 2022-09-02

倚天杖

TA貢獻1828條經驗獲得超3個贊

我和@bryan60持有同樣的看法。材料表可以讓您免于這樣的噩夢

const dataSource = [

{id: 1, name:"Test 1", currency: "Euro", status: "Active", date: "4th of April 2008" },

{id: 2, name:"Test 2", currency: "Dollar", status: "Active", date: "12nd of May 2005" }

];

displayedColumns: string[] = ['id', 'name', 'currency', 'status', 'date'];

<ng-container matColumnDef="id">

<td mat-cell *matCellDef="let element"> {{element.id}} </td>

</ng-container>

<ng-container matColumnDef="name">

<td mat-cell *matCellDef="let element"> {{element.name}} </td>

</ng-container>

<ng-container matColumnDef="currency">

<th mat-header-cell *matHeaderCellDef> Currency </th>

<td mat-cell *matCellDef="let element"> {{1 | currency: element.currency}} </td>

</ng-container>

<ng-container matColumnDef="status">

<th mat-header-cell *matHeaderCellDef> Status </th>

<td mat-cell *matCellDef="let element"> {{element.status}} </td>

</ng-container>

<ng-container matColumnDef="date">

<td mat-cell *matCellDef="let element"> {{element.date | date: 'dd/MM/yyyy' }} </td>

</ng-container>

</table>

反對回復 2022-09-02

2 回答
0 關注
109 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

角度 *ngFor 指令顯示視圖上的數據

角度 *ngFor 指令顯示視圖上的數據

2 回答

添加回答