0 
API data {
  id: 1,
  date: "21/may/2020",
  name: "Server A",
  geo: "Europa",
  status: "online"
}

 ngOnInit {
   this.col = [
     {field: 'name', header: 'Server Name'},
     {field: 'geo',  header: 'Geography'},
     {field: 'status', header: 'Status'},
     {field: 'date', header: 'Date'}
   ]
}

我正在测试 angular PrimeNG 并且我有一个数据表，我在其中手动设置每个表行的值，它工作正常。

模板

 <ng-template>
  <td>
    <tr>
      <td>{{rowData.name}}</td>
      <td>{{rowData.geo}}</td>
      <td>{{rowData.status}}</td>
      <td>{{rowData.date | date: 'dd/MMM/yyyy'}}</td>
    </tr>
  <td>
  <ng-template>

我更新了模板以动态循环遍历对象并设置数据，如何更新循环以便在渲染“日期”对象时插入管道。

 <td *ngFor="let col of column">
    {{rowData[col.field]}}
</td>

以上{{rowData[col.field]}}是有效的，但我不知道如何在里面*ngFor="let col of columns "我只能更新 col.date 并将管道添加到其中。

这是我尝试但没有成功的方法，bave 正在工作，但 Pipe 没有，如果我添加 keyvalue，表格数据将不再显示。

<td *ngFor="let col of columns | keyvalue">
  <ng-container *ngIf="rowData[col.field] !== 'date'"> {{rowData[col.field]}}</ng-container>
   <ng-container *ngIf="rowData[col.field] === 'date'"> {{rowData[col.field] | date: 'dd/MMM/yyyy'}}</ng-container>
</td>

我可以研究的任何建议或示例？

4

2 回答 2

2

如果我理解你的问题是正确的，你想在生日字段上应用管道，所以你可以这样做，

 <td *ngFor="let data of object">
    {{data["birthdate"] | date: 'dd/MMM/yyyy' }}
</td>
于 2020-05-25T19:16:36.740 回答
1

使用键值管道，如

<td *ngFor="let data of object | keyvalue">
  <ng-container *ngIf="data.key !== 'birthdate'"> {{data.value}}</ng-container>
   <ng-container *ngIf="data.key === 'birthdate'"> {{data.value | date: 'dd/MMM/yyyy'}}</ng-container>
</td>
于 2020-05-25T19:19:30.327 回答