Javascript 角度*用于视图上的指令显示数据

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

Template.html
{{rowData[col.field]}

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

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

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

{{rowData[col.field]|日期：'dd/MMM/yyyy'}
{{rowData[col.field]|货币：'CAD'：'code'}
{{rowData[col.field]|大写}}

---

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

您可以使用

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>

{{rowData[col.field]|日期：'dd/MMM/yyyy'}
{{rowData[col.field]|货币：'CAD'：'code'}
{{rowData[col.field]|大写}}
{{rowData[col.field]}我与@bryan60持有相同的观点

const数据源=[
{id:1，名称：“测试1”，货币：“欧元”，状态：“有效”，日期：“2008年4月4日”}，
{id:2，名称：“测试2”，货币：“美元”，状态：“有效”，日期：“2005年5月12日”}
];
displayedColumns:string[]=['id'、'名称'、'货币'、'状态'、'日期']；


身份证件
{{element.id}
名称
{{element.name}
通货
{1 | currency:element.currency}
地位
{{element.status}
日期
{{element.date}date:'dd/MM/yyyy'}
以下是我使用CDK表创建的示例：


它使用动态方法。
我将研究如何使用提供表格（如角材质）的组件库。如果你希望你的列在本质上是动态的，那么你就可以更好地完成你所拥有的东西，这将基本上包括滚动你自己的组件库。你可以考虑使用的是CDK表。这件事是你负责的。