ngFor 不显示数组数据答案

【问题标题】：ngFor not displaying array datangFor 不显示数组数据
【发布时间】：2019-09-30 21:02:06
【问题描述】：

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

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

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

【问题讨论】：

是否有任何理由使用 ngOnChanges() 而不是 ngOnInit() ？
没有。我只是用 ngOnChanges 测试它。我也尝试了 ngOnInit，结果相同。
试试这个ngOnChanges() { this.rmArray= Array(this.rooms); console.log('this.rooms',this.rooms); } 会打印任何结果吗？

【解决方案1】：

您可以将 rooms$ 发送到 rooms-component 而不是 (rooms$ | async)。我的意思是这样的：

<room-component [rooms$]=rooms$></room-component>

然后你在房间组件中使用“异步”来接收 ngFor 中的房间。像这样：

<li *ngFor="let room of (rooms$ |async) ">
    {{ room.name }}
</li>

这样，你不需要使用 ngOnChanges() 来更新房间组件中的房间列表。

我创建了一个小项目来展示它是如何工作的：

【讨论】：

【解决方案2】：

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

首先，您可以将输入 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 用于合并来自多个输入的数据

【讨论】：