Question

我用可观察的东西撞在墙上。我可以找到的几乎所有文档都使用较旧的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.
}

Answer 1

您可能想要做的是用数据填充另一个Observable，以便您可以在项目中的其他位置访问它，而无需多次调用API。

为此，您创建了一个Subject（在本例中为BehaviorSubject），并可以在API调用返回响应时用数据填充该数据。

然后，为了在其他地方访问此数据，您可以创建一个“获取”函数以在需要数据时返回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（这是处理代码中可观察对象的一种非常方便的方法）。

Answer 2

您不应该在Observable内订阅getData2。取而代之的是原样，然后执行以下操作：

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

请注意，变量dataSource将在请求完成后（异步）设置，因此您不能在同一块作用域中立即使用它。

如果要立即使用它，则将代码放入订阅中。

Answer 3

只需从getData()返回HTTP请求并在workbookInit函数中进行订阅即可。

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

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

Answer 4

如果您有一个可观察项，它提供了用于填充表的数据，则最好的方法是不使用subscribe()，而是通过使用async管道在您的html模板中直接使用该可观察项。您将不必担心，您的代码将更加简单。

Angular 6 Observables-从.subscribe（）函数提取数据并在其他地方使用

4 个答案: