关于javascript:angular6中使用ngFor遍历数组对象并且利用管道pipe显示对象的键值对

8次阅读

共计 668 个字符，预计需要花费 2 分钟才能阅读完成。

// 例：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 成果

正文完