我用可观察的东西撞在墙上。我能找到的几乎所有文档都使用较旧的rxjs
语法。
我有一个API调用,这是一个可观察的。我在其他地方调用它并订阅它 - 尝试使用此GET
请求中的数据填充表格。
如果我只是console.log
我的getData
函数,它记录订阅而不是我的数据。我可以在data
函数中成功console.log .subscribe
,但我想在data
之外使用.subscribe()
。
如何从data
函数中提取.subscribe()
并在其他地方使用它?或者,我的所有逻辑都必须包含在.subscribe()
函数中才能使用data
?
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.
}
只需从getData()
返回HTTP req并在workbookInit
函数内订阅它。
getData2() {
return this.m_dbService.get('api/myApiPath')
}
workbookInit(args){
this.getData2().subscribe(
data => {
var datasource = data
},
error => { throw error },
() => console.log("finished")
}
您可能想要做的是使用数据填充另一个Observable
,以便您可以在项目的其他位置访问它,而无需多次调用API。
为此,您可以创建所谓的Subject
(在本例中为BehaviorSubject
),并且当API调用返回响应时,您可以使用数据填充该数据。
然后,为了在其他地方访问这些数据,您可以创建一个“get”函数,以便在需要数据时返回Subject
(它本身就是Observable
)。
这是一个例子:
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(这是一种非常方便的方法来处理代码中的observable)。
你不应该订阅Observable
里面的getData2
。按原样返回,然后执行以下操作:
var dataSource;
this.getData2().subscribe(res => dataSource = res);
请注意,变量dataSource
将在请求完成(异步)时设置,因此您不能在同一块范围内立即使用它。
如果要立即使用它,请将代码放入订阅中。
如果你有一个提供数据来填充表的observable,最好的方法是不使用subscribe()
,而是使用async
管道直接在你的html模板中使用observable。您将不必担心,您的代码将更加简单。