Angular 5 ng-repeat 实现

Question

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

ma​​nage.html

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

ma​​nage.ts

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>
  {{room.roomName}} : {{room.floorNumber}}
  </li>

它可能会显示名称和傻瓜号码。

Answer 2

使用管道遍历对象键。

<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]);
    }
}

Answer 3

ng-repeat 在 Angular 2+ 中不再存在。你有几个选择。 如果roomDetail 始终具有相同的格式，您可以执行以下操作：

<ul *ngFor="let room of roomDetail; let i = index">
     <li>
        RoomName : {{room.roomName}}
     </li>
     <li>
        FloorNumber : {{room.floorNumber}}
     </li>
     <li>
        BuildingName : {{room.buildingName}}
     </li>
</ul>

更多涉及的是 ManagePage 中的转换：

getIterableRoomDetails = (room, index) => Object.keys(room).map(key => ({key: key, data: this.roomDetail[index][key]}))

使用您的模板，例如：

<ul *ngFor="let room of roomDetail; let i = index">
     <li *ngFor="let details of getIterableRoomDetails(room, index)">
        {{details.key}} : {{details.data}}
     </li>
</ul>