Observable 的变化未反映在 View 中答案

【问题标题】：Changes in Observable not reflected in ViewObservable 的变化未反映在 View 中
【发布时间】：2016-09-26 12:42:28
【问题描述】：

我基本上是跟着this guide实现了一个Observable数据服务。

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

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

组件使用模板中的存储，如下所示：

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

现在，当应用程序加载时，这可以正常工作 - 我的所有项目都显示出来了。但是，如果我在 store 类中使用以下代码将项目添加到 BehaviorSubject：

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

这不会反映在视图中。我的印象是，更改处理是由 angular2 自动完成的，但似乎并非如此。

如何检测和处理此类更改，以便它们反映在视图中？

【问题讨论】：

标签： angular rxjs

【解决方案1】：

我怀疑问题出在你打电话的方式上：

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

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

async 管道定义为：

异步管道订阅 Observable 或 Promise 并返回它发出的最新值。

因此，当您调用 this.items.next(...) 时，异步管道仅接收新长度并尝试使用 *ngFor 对其进行迭代。

如果this.item 持有<List<Item>> 那么你可能想打电话：

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

顺便说一句，asObservable() 方法用于隐藏您正在使用Subject 的事实。主题让你打电话给next() 或complete()，这是你不希望其他用户搞砸的事情。出于这个原因，最好在任何地方都传递一个Observable，并将Subject 留给你自己知道你需要它的地方。

【讨论】：

【解决方案2】：

items 属性应该是 Observable，但是你将它设置为 BehaviourSubject 类型。在您的链接中有：

@Injectable()
export class TodoStore {
    private _todos: BehaviorSubject<List<Todo>> = new BehaviorSubject(List([]));

    public todos: Observable<List<Todo>> = this._todos.asObservable();

    constructor(private todoBackendService: TodoBackendService) {
        this.loadInitialData();
    }
    ...
}

所以假设您按照本教程进行操作，您应该执行以下操作：

private _items: BehaviorSubject<List<Item>> = new BehaviorSubject(List([]));
public items: Observable<List<Item>> = this._items.asObservable();

【讨论】：

您绝对是对的，完全错过了这一点。虽然我不明白为什么当BehaviourSubjectextends Observable 时我必须打电话给.asObservable()。不幸的是，它仍然不起作用。

【解决方案3】：

解决了 - 这是一个非常愚蠢的错误 - 真丢人。 ItemsStore 被注入到两个不同的类中，并且由于 Dependency Injection 为每次注入创建一个实例 - 好吧，我们有两个相同的类型，而应该只有一个。

将依赖项 (ItemsStore) 移动到全局提供程序数组解决了问题。

【讨论】：