ng用于不显示数组数据

时间:2019-05-13 21:36:51

标签: angular ngfor

我有一个通过输入传递给许多对象的组件。

<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>

这不会显示任何内容。我怀疑这与我创建数组的方式有关。任何帮助表示赞赏。谢谢。

2 个答案:

答案 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