angular - 如何使用 RxJS 和 Angular2 构建真正的可观察集合？

Question

假设我想从商店检索一组记录，使用 *ngFor 将它们显示在列表中，例如

<ul>
    <li *ngFor="let record in records | async">
        ...
    </li>
</ul>

现在用户点击“新建...”按钮，另一条记录被添加到商店中并且

recordAdded: EventEmitter<string>;

开火告诉我位置。所以我从商店里得到了那条新记录——而且只有那条记录……哎呀，我怎么得到我的*ngFor显示此附加记录？

好的，所以我可以将所有记录保存在数组中，例如

_records: Record[];

并通过订阅 Observable<Record[]> 来填充这个数组喜欢

this.recordService.getAll().subscribe(r => this._records = r);

但是这个数组需要是一个Observable本身以便在有新记录时通知消费者。所以

observableRecords = Observable.create(obs => {
    this.recordService.getAll().subscribe(rec => {
        this._records = rec;
        obs.next(rec);
        // Got the array published, now waiting for events
        this.recordAdded.subscribe(rec => {
            this._records.push(rec);
            obs.next(this._records);
        });            
    });
});

呃......这不仅看起来很痛苦，而且还有大量的开销，因为每次添加新记录时整个数组都会重新发布，而且 - 很可能 - Angular 2 将重新构建整个每次都从头开始列出。

由于这是如此常见的情况，我想一定有更好的方法来做到这一点。

Answer 1

是的，当然有 - 你需要使用平面图

平面图是您发现自己在订阅中订阅时的方式。

您有一个流的流(元流)，您需要将其展平 - 然后您将能够订阅一次展平的流(避免嵌套订阅)。

阅读教程，直到它向您介绍 flatmap 为止。

https://gist.github.com/staltz/868e7e9bc2a7b8c1f754

这里有一些代码可以让你开始......

public tagsTextStream = this.tagsTextSubject.asObservable().flatMap((q:string) => {
// noinspection UnnecessaryLocalVariableJS
let restStream = this.restQueryService.getTagsList(q)
  .map((tags:any) => {
    // filter out any tags that already exist on the document
    let allTags = _.map(tags, 'name');
    let documentTags = _.map(this.tags, 'name');
    return _.pull(allTags, ...documentTags);
  })
  .catch((err:any) => {
    return Observable.throw(err);
  });
return restStream;
}).publish().refCount();

不要忘记.......publish().refCount()

或者您最终会收到多个请求和东西。

在我发送的链接上阅读更多相关信息。

附言

在上面的代码中，q 是从初始 observable 发出的值。请注意，术语 observable 和 stream 是可以互换的，它们是同一回事。 observable 只是描述一个你可以订阅的流。因此，响应式(Reactive)编程(Rx)。您正在对来自流的事件使用react。