angular - Observable 中的更改未反射(reflect)在 View 中

Question

我基本跟着this guide实现 Observable 数据服务。

在商店类 (ItemsStore) 中，我有一个包含项目列表的 BehaviorSubject

items:BehaviorSubject<List<Item>> = new BehaviorSubject(List([]));

组件在模板中使用该存储，如下所示:

<ion-slide *ngFor="let item of itemStore.items | async" >
  [...]
</ion-slide>

现在，当应用程序加载时这一切正常 - 我的所有项目都会显示。但是，如果我在商店类中使用以下代码将项目添加到 BehaviorSubject:

this.items.next(this.item.getValue().push(newItem));

这没有反射(reflect)在 View 中。我的印象是，更改处理是由 angular2 自动完成的，但事实并非如此。

如何检测和处理此类更改，以便它们反射(reflect)在 View 中？

Answer 1

我怀疑问题出在你的调用方式上:

this.items.next(this.item.getValue().push(newItem));

我不知道是什么this.item.getValue()返回但如果 push()方法同 Array.push() 它返回新的长度(重要的是它不会返回 this.items 并附加新项目)。

async管道定义为:

The async pipe subscribes to an Observable or Promise and returns the latest value it has emitted.

所以当你调用this.items.next(...)异步管道仅接收新长度并尝试使用 *ngFor 对其进行迭代.

如果this.item持有 <List<Item>>那么你可能想调用:

this.item.getValue().push(newItem);
this.items.next(this.item);

顺便说一句， asObservable() 方法用于隐藏您正在使用 Subject 的事实.主题让我们调用next()或 complete()这是您不希望其他用户搞砸的事情。出于这个原因，最好只传递一个 Observable。并保持 Subject只为你自己，你知道你需要它。