Question

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

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

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

Answer 1

不幸的是，这里几乎所有东西都是错误的。

首先，您可以将输入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

Answer 2

您可以将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中的房间列表。

我创建了一个小项目来展示其工作原理：