Angular 如何正确地观察一个可观察的物体

从我的组件开始，我声明了可观察的

import { Observable } from 'rxjs/Observable';
import { Subscription } from 'rxjs/Subscription';
import { tap, map, concat } from 'rxjs/operators';

contactsDataSource$: Observable<any>;

并使用异步管道将其引入模板：

<div *ngIf="(contactsDataSource$ | async) as contactList; else loading">

运行此命令时，我的控制台中出现一个错误，显示：

ng:///MediaListModule/MediaListBuilderComponent.ngfactory.js:351 ERROR TypeError: this.contactsDataSource$.concat is not a function

---

我仍然在学习rxjs，所以显然我不知道如何正确地做到这一点。我在这里遗漏了什么？

您这样做的问题是，订阅将在第一次调用

getMediaListBuilderData

后完成。在第一次订阅之前，您需要设置observable以及它如何连接来自多个源的结果。此外，如果希望管道中的操作与每个结果一起发生，则需要将其置于流的串联之后

从传递初始调用的

concat

创建一个可观察对象，并创建一个

Subject

，该对象将传递给

increment（）

中

getMediaListBuilderData

的所有调用的subscribe方法

this.incrementsObject=新主题（）；
此.contactsDataSource$=
海螺(
this.medialistsrv.getMediaListBuilderData({
mediaListId:this.mediaListId，
sortType:this.sortType，
斯塔特罗：这个，斯塔特罗，
numRows：这个
}
，this.incrementsObject）
.烟斗(
点击（响应=>{
this.mediaList=响应
.filter（items=>items.inMediaList==true）
.map（items=>items.contactId）；
this.mediaList.forEach（id=>this.u contacts.push（this.fb.control（id））；
}),
);
增量（）{
这是medialistsrv
.getMediaListBuilderData({
mediaListId:this.mediaListId，
sortType:this.sortType，
startRow：（this.numRows+1），
numRows：（this.numRows*2）
})
.订阅（此.incrementsObject）；
}

您正在混合使用PiTable和“prototype”操作符。请使用

this.contactsDataSource$.pipe（concat（…）、map（…）

这消除了错误，但实际上并没有在显示中显示新的流。当前contactsDataSource$是

contactsDataSource$：Observable；

因此，当我实现上面的内容时，我得到

类型“UnaryFunction”不能分配给类型“Observable”。

将导入更改为：

导入{concat}从'rxjs/observable/concat'；

是的，你在这里走的是对的。我最终要做的是创建一个包装器observable，并将我的所有其他流都导入/合并到其中。因为每个流返回一个变异的联系人数组，它实际上抵消了最后一个。这有意义吗？我不太明白发生了什么。我开始的时候曾经做过包装器可观察性，但Subject是一个可观察性包装器和观察者包装器，应该不需要可观察性包装器。很乐意为您提供任何帮助。

increment() {
    this.contactsDataSource$.concat(
        this.medialistsrv.getMediaListBuilderData({
            mediaListId: this.mediaListId,
            sortType: this.sortType,
            startRow: (this.numRows + 1),
            numRows: (this.numRows * 2)
        }).map(response => response)
    );
}

ng:///MediaListModule/MediaListBuilderComponent.ngfactory.js:351 ERROR TypeError: this.contactsDataSource$.concat is not a function

this.incrementsSubject = new Subject<myType>();
this.contactsDataSource$ = 
    concat(
        this.medialistsrv.getMediaListBuilderData({
            mediaListId: this.mediaListId,
           sortType: this.sortType,
           startRow: this.startRow,
           numRows: this.numRows
        }
        , this.incrementsSubject)
    .pipe(
        tap(response => {
            this.mediaList = response
               .filter(items => items.inMediaList === true)
               .map(items => items.contactId);
            this.mediaList.forEach(id => this._contacts.push(this.fb.control(id)));
        }),
    );

increment() {

    this.medialistsrv
        .getMediaListBuilderData({
            mediaListId: this.mediaListId,
            sortType: this.sortType,
            startRow: (this.numRows + 1),
           numRows: (this.numRows * 2)
         })
         .subscribe(this.incrementsSubject);
}