我有一个通过输入传递给许多对象的组件。
<rooms-component [rooms]="Rooms$ | async"></rooms-component>
在子组件中,我将所有对象放在OnChanges中的数组内
ngOnChanges() {
this.rmArray= Array(this.rooms);
}
在HTML中,我有一个ngFor来显示数据
<li *ngFor="let room of rmArray">
{{ room.name }}
</li>
这不会显示任何内容。我怀疑这与我创建数组的方式有关。任何帮助表示赞赏。谢谢。
答案 0 :(得分:0)
不幸的是,这里几乎所有东西都是错误的。
首先,您可以将输入rmArray
直接链接到模板。
第二,如果出于某种原因要对数据进行某种转换,则最佳实践是通过输入上的设置器进行。
@Input()
set rmArray(value) {
this.transformedData = PLACE YOUR LOGIC HERE
}
transformedData: any[];
最后,您需要一成不变的动作。
this.rmArray= Array(this.rooms)
应为:
this.rmArray= new Array(this.rooms)
或this.rmArray= [...this.rooms]
请记住,要合并来自多个输入的数据时,请使用ngOnChanges
答案 1 :(得分:0)
您可以将rooms $发送到rooms-component,而不是(rooms $ | async)。我的意思是这样的:
<room-component [rooms$]=rooms$></room-component>
然后,您可以在Rooms-Component中使用“异步”来接收ngFor中的空间。像这样:
<li *ngFor="let room of (rooms$ |async) ">
{{ room.name }}
</li>
这样,您无需使用ngOnChanges()来更新rooms-component中的房间列表。
我创建了一个小项目来展示其工作原理:
https://stackblitz.com/edit/angular-e4uefw?file=src/app/app.component.ts