Angular 6 个 observables - 从 .subscribe() 函数中提取数据并在别处使用

Question

我正在用 observables 撞墙。我能找到的几乎所有文档都采用较旧的 rxjs 语法。

我有一个 API 调用，它是一个可观察的。我在别处调用它并订阅它 - 试图用来自这个 GET 请求的数据填充 table。

如果我只是 console.log 我的 getData 函数，它会记录订阅而不是我的数据。我可以在 .subscribe 函数中成功 console.log data，但我想在 .subscribe().

之外使用 data

如何从 .subscribe() 函数中提取 data 并在其他地方使用它？或者，我的所有逻辑都必须包含在 .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

您不应该订阅 getData2 中的 Observable。 Return 改为原样，然后执行以下操作：

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

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

如果您想立即使用它，请将您的代码放入订阅中。

Answer 2

只是 return 来自 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 3

您可能想要做的是用数据填充另一个 Observable，这样您就可以在项目的其他地方访问它，而无需多次调用 API。

为此，您创建了所谓的 Subject（在本例中为 BehaviorSubject），您可以在 API 调用 [=39] 时用数据填充它=]是回应。

然后，为了在其他地方访问此数据，您可以创建一个 "get" 函数来 return 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 4

如果您有一个提供数据来填充 table 的可观察对象，最好的方法是不要使用 subscribe()，而是直接在您的 html 模板中使用可观察对象，方法是使用async 管道。您将无需担心，您的代码也将更加简单。

Angular 6 个 observables - 从 .subscribe() 函数中提取数据并在别处使用

Angular 6 observables - extract data from .subscribe() function and use it elsewhere

javascript

asynchronous

subscribe

observable

rxjs