Angular 5 + Ionic 3中ng-repeat实现问题求助

嘿，我一眼就看到问题啦——你把AngularJS（1.x）和Angular（2+，也就是你用的Angular 5）的循环指令搞混了！ng-repeat是AngularJS的老语法，Angular 5根本不认识它，得用Angular专属的*ngFor才行。而且Angular 5还没有内置的对象键值对遍历管道，得用点小技巧来处理。

下面是修正后的完整代码：

第一步：修正manage.html模板 #

把你原来的<li>上的ng-repeat换成Angular的*ngFor，同时通过方法来获取对象的键：

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

第二步：完善manage.ts逻辑 #

需要在组件里添加一个辅助方法，用来获取对象的所有键，同时别忘了初始化你的roomDetail数据（不然循环啥也渲染不出来）：

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-manage',
  templateUrl: 'manage.html'
})
export class ManagePage {
  roomDetail: any[];

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    // 这里给roomDetail赋个示例值，你可以换成自己的真实数据
    this.roomDetail = [
      { roomNumber: '101', type: 'Single', price: 150 },
      { roomNumber: '102', type: 'Double', price: 220 }
    ];
  }

  // 辅助方法：获取对象的所有键
  getObjectKeys(obj: any) {
    return Object.keys(obj);
  }
}

为啥要这么改？ #

• ng-repeat是AngularJS的旧指令，Angular 5及以后的版本完全不兼容它，必须用*ngFor来实现循环渲染。
• Angular 5还没有内置的KeyValuePipe（这个管道是Angular 6才加的），所以我们得通过Object.keys()来手动获取对象的键，再通过键来取值。
• 一定要确保roomDetail数组已经被正确初始化并赋值，如果它是空的或者未定义，*ngFor就不会渲染任何内容哦。

内容的提问来源于stack exchange，提问作者Darshan theerth