Question

我正在尝试实现ng-repeat的基本示例。我正在使用离子3和Angular 5.我不知道问题是什么？帮我解决一下代码。

manage.html

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

manage.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 *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 2

Angular 2+中不再存在

ng-repeat。你有几个选择。如果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>

Answer 3

使用以下代码更新您的代码：

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

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

角度5 ng重复实施

3 个答案: