如何调试RxJS/Angular？发出新值时视图不更新

Question

我真的用这个把我的头撞到墙上了…：-\

我有一个哑组件，它具有接收数组的@Input（）：

export class ChildComponent implements OnChanges {

  @Input() items: Item[];

  ngOnChanges(changes: SimpleChanges) {
    console.log('ngOnChanges fired:', changes['items'].currentValue.length)
  }
}

父组件通过模板绑定和async管道将数组传递给子组件：

<h1>Parent Component</h1>

<child [items]="items$ | async"></child>

这样做正确吗？

但是，items$发出新值时，子组件中不会激发ngOnChanges。

我有一个数据存储类来维护这个可观察的项目数组。获取新项目时，它会生成一个新数组（不可变），并将其推送到items$observable。但是，在子组件中未检测到更改。如果我在页面周围单击一点，最终将启动更改检测，它将更新。

关键是：我在StackBlitz上创建了一个问题示例，结果发现它在那里工作得很好！！！！

因此，我知道我的真实代码与简化的示例有所不同，但我一直无法找到它。

因此，我的问题是：

如何调试RxJS/Angular？

>

我想也许项目$可观察引用被重新分配到某个地方，让模板订阅一个实际上没有得到新排放的可观察引用，所以我让@Input（）成为一个每次都可以监控的getter/setter它被设定了，而且只发生一次。

我尝试将子组件更改为使用OnPush更改检测策略，但没有效果。

我被难倒了...

关于如何追踪我的问题有什么建议吗？

谢谢！：-）

Answer 1

通过将{{items$|async | json}}放在父组件中靠近子组件的某个位置，确保可观察对象正在发射。您可能会发现items$没有发出值，如果是，则子项将得到更新。

您是否正在修改当前阵列并重新提交同一实例？修改数组时，请确保使用spread操作符、map或filer构建新数组，而不是推送和弹出值，然后让observable使用修改后的数据发射相同的数组实例。确保您发出一个新的数组实例，不要对旧的进行变异。

与您的问题无关，但我倾向于在OnChanges上使用setter属性

export class ChildComponent {
  items: Item[];
  @Input('items')
  set itemsSet(items: Item[]) {
    this.items = items;
    console.log('items set:', items.length);
  }
}