Угловая 5 нг-повторная реализация

Question

Я пытаюсь реализовать базовый пример ng-repeat. Я использую ionic 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

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>

Answer 3

Обновите ваш код с помощью:

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

Может отображаться имя и номер.