如何使用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

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

每当您发现自己在订阅中进行订阅时，平面地图就是您的最佳选择。

您有一个流流（元流），并且需要将其展平 - 然后您将能够订阅展平流一次（避免嵌套订阅）。

阅读教程直到向您介绍平面地图。

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 只是描述您可以订阅的流。因此，反应式编程（Rx）。您正在对来自流的事件做出反应。