angular6中使用*ngFor遍历数组对象，并且利用管道（pipe）显示对象的键值对

//例：
public list: any = [
    {
      customer: '张三',
      card_id: '1306****2022',
      address: '北京朝阳区',
    },
    {
      customer: '李四',
      card_id: '1306****2088',
      address: '北京海淀区',
    },
];
currentCustomerName = '张三';

管道获取对象的key value

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'getKey',
})
export class GetKeyPipe implements PipeTransform {
  transform(value: any, args?: any): any {
    return Object.keys(value).map((key) => Object.assign({ key }, value[key]));
  }
}

html代码

<div class="list">
 <div class="item" *ngFor="let item of list>
   <div *ngIf="item.customer === currentCustomerName">
     <div class="item-container" 
          *ngFor="let _item of item | getKey>
       <div class="title">{{ _item.key }}</div>
       <div class="content">{{item[_item.key]}</div>
     </div>
   </div>
 </div>
</div>

ui效果