ionic3 ngFor指令处理对象

我们知道,在ng1中ng-repeat是可以将对象以K-V的形式进行处理,但是在ng2中ngFor指令是没有类似的这种功能的,那么我们要怎么去处理呢?其实也比较简单,那就是自己写一个管道来进行处理.
1.输入命令ionic g pipe keys创建管道,并在AppModule 中导入
2.代码实现:

@Pipe({
  name: 'keys',
})
export class KeysPipe implements PipeTransform {
  /**
   * Takes a value and makes it lowercase.
   */
  transform(value, args:string[]) : any {
      let keys = [];
      for (let key in value) {
          keys.push({key: key, value: value[key]});
      }
      return keys;
  }
}

3.使用
例如:在home.ts 中定义

items : any;
ngOnInit() {
   this.items = {
      animal : [
        'dog','cat','monkey'
      ],
      transport : [
        'ship','car','air‧plane'
      ]
    }
  }

在home.html中使用:

<ion-list>
    <ion-item *ngFor="let item of items | keys">
      <p>key : {{item.key}}</p>
      <p>value :{{item.value.toString()}}</p>
    </ion-item>
  </ion-list>

最终效果:

最终效果.png