如何以角度迭代一个字段中包含数组的对象答案

【问题标题】：How to iterate object which contains array in one field in angular如何以角度迭代一个字段中包含数组的对象
【发布时间】：2020-06-12 17:56:04
【问题描述】：

我想在我的 Angular 项目的 html 文件中显示一些记录。我正在收到回复-

tabledata = {
   "employeeId":12345678,
   "employeeName":"John",
   "VehicleNumber": "LA99DU3267",
   "city":"Toronto", 
   "events":[
      {
         "date":"05/01/20",
         "inTime":"01:09:45",
         "OutTime":"05:13:50",       
         "hoursSpent": 20,           
      },
      {
         "date":"05/01/21",
         "inTime":"02:09:45",
         "OutTime":"06:13:50",       
         "hoursSpent": 30,
      },
      {
         "date":"05/01/22",
         "inTime":"03:09:45",
         "OutTime":"07:13:50",       
         "hoursSpent": 10,       
      },
      {
         "date":"05/01/23",
         "inTime":"04:09:45",
         "OutTime":"08:13:50",       
         "hoursSpent": 40,       
      },
   ],
}

我想在如下表中显示数据-

Empid   empname     vehicle       city      date       intime     outtime     hoursSpent
john    12345678   LA99DU3267    Toronto   05/01/20    01:09:45   05:13:50     20
john    12345678   LA99DU3267    Toronto   05/01/21    02:09:45   06:13:50     30
john    12345678   LA99DU3267    Toronto   05/01/22    03:09:45   07:13:50     10
john    12345678   LA99DU3267    Toronto   05/01/23    04:09:45   08:13:50     40

我可以通过使用来显示数组内的数组中的值-

<ion-row class="data-table data-table-row" *ngFor="let data of tableData.events"> 
    <ion-col class="ion-text-center cell-class" *ngFor="let item of data | keyvalue: originalOrder">
         {{ item.key  }}
     </ion-col>
 </ion-row>

但要显示对象中的值，我没有得到任何解决方案。

请帮忙。提前致谢 如果有人将其标记为负面，请这样做，但请先帮助我

也许这是一个愚蠢的问题，但我是 Angular 新手，所以这对我来说真的很重要。

【问题讨论】：

你想知道如何使用keyvalue管道来获取对象的属性值吗？
我完全不知道如何使用键值管道，但是在尝试迭代对象时得到了这个解决方案
那些可以使用tabledata直接访问。例如。 tabledata.employeeName
这些值可以直接访问，但我也需要访问同一行表中的数组值。我怎样才能开始我的 for 循环？

标签： javascript angular angular8

【解决方案1】：

您可以使用自定义管道来转换数据并显示它

管道：

import { Pipe, PipeTransform } from "@angular/core";
@Pipe({
  name:'datamap'
})
export class DataMapPipe implements PipeTransform{
  transform(val,arg){
    return val.map(event =>{
    const { events, ...otherProps } = arg;
     return {
       ...event,
       ...otherProps
     } 
    })
  }
}

用法：

<ion-row class="data-table data-table-row" *ngFor="let data of tableData.events | datamap:tableData"> 
    <ion-col class="ion-text-center cell-class" *ngFor="let item of data | keyvalue: originalOrder">
         {{ item.key  }}
     </ion-col>
 </ion-row>

我不知道 ionic 我相信这会有所帮助

Stackblitz

【讨论】：