Angular 5 ng-repeat implementation

Question

I'm trying to implement a basic example of ng-repeat. I'm using ionic 3 and Angular 5. I don't know what the problem is? Help me with the code.

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

Use pipe to iterate over object keys.

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

Pipe

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