代码之家 › 专栏 › 技术社区 › Kyle Vassella

Angular6 Observables-从.subscribe()函数中提取数据并在其他地方使用

subscribe observable rxjs asynchronous angular

Kyle Vassella · 技术社区 · 6 年前

我的头撞在墙上,上面挂着看得见的东西。我能找到的几乎所有文档都是旧的 rxjs 语法。

我有一个API调用,它是可观察的。我在别处调用它并订阅它-尝试用这个表中的数据填充一个表 GET 请求。

如果我只是 console.log 我的 getData 函数,它记录订阅而不是我的数据。我可以成功地控制台.log data 在 .subscribe 函数,但我想使用 数据 外部 .subscribe() .

我怎么提取 数据 离开 .订阅() 在其他地方使用?或者,我所有的逻辑必须包含在 .订阅() 要使用的函数 数据 ?

getData2() {
    return this.m_dbService.get('api/myApiPath').subscribe(
        data => (console.log(data)), //This properly logs my data. How to extract `data` out of here and actually use it?
        error => { throw error },
        () => console.log("finished")
    );
}

workbookInit(args){
     var datasource = this.getData2();   // this returns the subscription and doesn't work.
}

4 回复 | 直到 6 年前

Sachila Ranawaka 6 年前

只需返回HTTP REQ getData() 并在 workbookInit 功能。

getData2() {
    return this.m_dbService.get('api/myApiPath')
}

workbookInit(args){
    this.getData2().subscribe(
        data => {
           var datasource = data 
        }, 
        error => { throw error },
        () => console.log("finished") 
}

Tim Klein 6 年前

你可能想做的是填充另一个 Observable 通过这些数据,您可以在项目中的其他地方访问它,而无需多次调用API。

要做到这一点,您需要创建一个 Subject (在这种情况下a BehaviorSubject )当API调用返回响应时,您可以用数据填充它。

然后,为了在其他地方访问这些数据,可以创建一个“get”函数来返回 主题 (这本身就是 可观测的 )无论何时需要数据。

下面是一个例子:

my-data.service.ts

myData: BehaviorSubject<number> = new BehaviorSubject<number>(0);

callApi() {
    this.dbService.get('apiUrl').subscribe(
        (data) = > this.myData.next(data) // Assuming data is a 'number'
    );
}

getMyData() {
    return this.myData.asObservable();
}

现在要在组件中使用它:

this.myService.getMyData().subscribe(
    (data) => { /* Use the value from myData observable freely */ }
);

或者你可以依靠 Angular async pipe (这是处理代码中的可见项的非常方便的方法)。

Guerric P 6 年前

您不应该订阅 Observable 里面 getData2 . 把它还给我如相反,请执行以下操作:

var dataSource;
this.getData2().subscribe(res => dataSource = res);

请注意变量 dataSource 将在请求完成时设置(异步),因此不能在同一块范围内立即使用它。

如果您想立即使用它,那么将您的代码放入订阅中。

edwin 6 年前

如果您有一个提供数据来填充表的Observable,最好的方法是不使用 subscribe() 但是在HTML模板中直接使用Observable async 管子。你不用担心,你的代码会简单得多。