时间戳

首页 > 解决方案 > ngFor 不显示数组数据

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>

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

标签： angularngfor

解决方案

不幸的是，这里几乎一切都错了。

首先，您可以将输入rmArray直接链接到您的模板。

其次，如果由于某种原因您想对数据进行某种转换，最好的做法是通过输入的 setter 来完成。

@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当您想要组合来自多个输入的数据时使用

推荐阅读