如何迭代在 angular 的一个字段中包含数组的 object

Question

我想在我的 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> 

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

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

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

Answer 1

您可以使用自定义 pipe 转换数据并显示

Pipe：

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> 

我对离子一无所知，我相信这会有所帮助

堆栈闪电战