Angular 5 ng-repeat 实现

Posted 2023-03-13

【中文标题】Angular 5 ng-repeat 实现

【英文标题】：Angular 5 ng-repeat implementation

【发布时间】：2018-10-08 00:04:31

【问题描述】：

我正在尝试实现 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) 

【问题讨论】：

什么不起作用？你有什么错误吗？您遇到的问题的后果是什么？

什么都没有显示。没有错误。

您应该使用*ngFor 而不是ng-repeat 来表示角度2+

【参考方案1】：

更新你的代码：

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

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

【讨论】：

因为我的对象是动态的，所以每次我不能给它的关键。

【参考方案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]);
    

【讨论】：

那么它是我需要包含的另一个导出类keysPipe吗？因为它显示“找不到管道'键'”。

【参考方案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>

【讨论】：

我收到 Typescript 错误：';'预计在 ===> 数据中：this.roomDetail[index][key]

对不起，这就是我在这里编码所得到的。我已经更新了我的答案。问题是 key => key: ... 是错误的语法。它应该是（我更新了我的答案）key => (key: ...。注意=> (。它导致被解释为return key: ...