typescript Angular 5 ng-repeat 实现
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50057385/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 5 ng-repeat implementation
提问by Darshan theerth
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.
我正在尝试实现 ng-repeat 的基本示例。我正在使用 ionic 3 和 Angular 5。我不知道问题是什么？帮我看代码。
manage.html
管理.html
<ul *ngFor="let room of roomDetail; let i = index">
<li ng-repeat="(key,value) in room">
{{key}} : {{value}}
</li>
</ul>
manage.ts
管理.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) {}
}
回答by ranjeet8082
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]);
}
}
回答by JanS
ng-repeatdoes not exist anymore in Angular 2+. You have a couple of options.
If a roomDetailalways has the same format, you can do the following:
ng-repeat在 Angular 2+ 中不再存在。你有几个选择。如果 aroomDetail始终具有相同的格式，则可以执行以下操作：
<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>
A bit more involved would be a transformation in your ManagePage:
更复杂的是在您的 ManagePage 中进行转换：
getIterableRoomDetails = (room, index) => Object.keys(room).map(key => ({key: key, data: this.roomDetail[index][key]}))
With your template like:
使用您的模板，例如：
<ul *ngFor="let room of roomDetail; let i = index">
<li *ngFor="let details of getIterableRoomDetails(room, index)">
{{details.key}} : {{details.data}}
</li>
</ul>
回答by Srusti Thakkar
Update your code with :
使用以下内容更新您的代码：
<ul *ngFor="let room of roomDetail; let i = index">
<li>
{{room.roomName}} : {{room.floorNumber}}
</li>
It might display name and foolrnumber.
它可能会显示姓名和傻瓜号码。
