Angular 5 ng-repeat实现

Question

我正在尝试实现ng-repeat的基本示例。我使用的是ionic 3和Angular5。我不知道这是什么问题？帮助我的代码。

manage.html

<ul *ngFor="let room of roomDetail; let i = index">
     <li ng-repeat="(key,value) in room">
      {{key}} : {{value}}
      </li>
  </ul>

管理

import {
    Component
}
from '@angular/core';
import {
    IonicPage, NavController, NavParams
}
from 'ionic-angular';@
IonicPage()@ Component({
    selector: 'page-manage',
    templateUrl: 'manage.html',
})
export class ManagePage {
    public room = {};
    public roomDetail = [{
        "roomName": "Room-1",
        "floorNumber": "2nd Floor",
        "buildingName": "Golden Millenium"
}];
    constructor(public navCtrl: NavController, public navParams: NavParams) {}

}

Answer 1

使用管道迭代对象键。

<ul *ngFor="let room of roomDetail; let i = index">
     <li *ngFor="let key of room | keys">
      {{key}} : {{room[key]}}
      </li>
  </ul>

管

@Pipe({ name: 'keys',  pure: false })
export class KeysPipe implements PipeTransform {
    transform(value: any, args: any[] = null): any {
        return Object.keys(value)//.map(key => value[key]);
    }
}