javascript - Angular *ngFor 指令在 View 中显示数据

Question

使用 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>

现在我需要对每个数据值进行修改，例如:

*名称使用大写管道
*货币使用货币管道
*日期使用日期管

<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>

如何修改正在渲染的数据并为每个值进行相应的修改

Answer 1

您可以通过使用 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>

但我建议使用一些提供表格的组件库，如果你需要一个像这样的动态列的表格。由于您的其他选择基本上涉及滚动您自己的可重用表组件，这可能是矫枉过正。