Angular *ngFor 指令在视图上显示数据
Angular *ngFor directive display data on view
使用 angular primeng 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>
现在我需要对每个数据值进行修改,例如:
*名称使用大写竖线
*货币使用货币管道
*date 使用日期管道
<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>
如何修改正在渲染的数据并为每个值相应地修改
您可以通过使用 ngSwitch
来取得边际改进:
<ng-container *ngFor="let col of columne">
<td [ngSwitch]="col.field">
<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>
但如果您需要 table 和这样的动态列,我建议您使用一些提供 table 的组件库。由于您的其他选择基本上涉及滚动您自己的可重用 table 组件,这可能有点矫枉过正。
我和@bryan60 的观点一样。 Material table can save you from such nightmares
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'];
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef> Id </th>
<td mat-cell *matCellDef="let element"> {{element.id}} </td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<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">
<th mat-header-cell *matHeaderCellDef> Date</th>
<td mat-cell *matCellDef="let element"> {{element.date | date: 'dd/MM/yyyy' }} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
这是我使用 CDK-tables 创建的示例:
https://stackblitz.com/edit/angular-ivy-bes8zf
它使用动态方法。
使用 angular primeng 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>
现在我需要对每个数据值进行修改,例如:
*名称使用大写竖线
*货币使用货币管道
*date 使用日期管道
<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>
如何修改正在渲染的数据并为每个值相应地修改
您可以通过使用 ngSwitch
来取得边际改进:
<ng-container *ngFor="let col of columne">
<td [ngSwitch]="col.field">
<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>
但如果您需要 table 和这样的动态列,我建议您使用一些提供 table 的组件库。由于您的其他选择基本上涉及滚动您自己的可重用 table 组件,这可能有点矫枉过正。
我和@bryan60 的观点一样。 Material table can save you from such nightmares
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'];
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef> Id </th>
<td mat-cell *matCellDef="let element"> {{element.id}} </td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<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">
<th mat-header-cell *matHeaderCellDef> Date</th>
<td mat-cell *matCellDef="let element"> {{element.date | date: 'dd/MM/yyyy' }} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
这是我使用 CDK-tables 创建的示例:
https://stackblitz.com/edit/angular-ivy-bes8zf
它使用动态方法。