Angular *ngFor 在循环抛出对象时使用 PIPE 不起作用

Question

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，我有一个数据-table，我在其中手动设置每个 table 行的值，它工作正常。

模板

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

我更新了模板以动态循环遍历对象并设置数据，如何更新循环以便在呈现 "date" 对象时插入管道。

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

上面的 {{rowData[col.field]}} 有效，但我不确定如何进入 *ngFor="let col of columns " 我只能更新 col.date 并向其中添加管道。

这是我尝试但未成功的方法，baove 正在运行但 Pipe 不起作用，而且如果我添加键值，tables 数据将不再显示。

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

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

Answer 1

如果我没看错你的问题，你想在生日字段上应用管道，所以你可以这样做，

 <td *ngFor="let data of object">
    {{data["birthdate"] | date: 'dd/MMM/yyyy' }}
</td>

Answer 2

像

一样使用键值管道

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

Angular *ngFor 在循环抛出对象时使用 PIPE 不起作用

Angular *ngFor using PIPE not working when looping throw object

javascript

angular

primeng

primeng-turbotable

for-of-loop