从 Observable 修改和返回数据：Angular答案

【问题标题】：Modify and return data from Observable : Angular从 Observable 修改和返回数据：Angular
【发布时间】：2021-03-18 13:45:08
【问题描述】：

我有一个服务来获取属性列表，在该服务中我使用 map 修改响应并将最终数组作为 Observable 返回。

但是我如何才能将最终数组作为简单的 JSON 从服务获取到我的组件。这是我到目前为止所做的。

服务

getPropertyList(){
    let propertyList$ : Observable<any> = this._http.get('http://localhost:3000/...');

    return propertyList$.pipe(
      map(data => {
        // do your transformations
        let listArray: Array<any> = data.response.dataset;
        listArray.forEach(list => {
          list.name = 'jhon deo';
        })
        return listArray;
      })
    )
}

组件

this._service.getPropertyList()
 .subscribe({
   next: (result) => {
     console.log(result);
   },
   error: (err) => {
     console.log(err);
   }
})

我正在尝试从组件中实现它 -

getData(){
   const listData: Array<any> = this._service.getPropertyList();
}

【问题讨论】：

getPropertyList 不返回一个数组，它返回一个数组的observable。您需要订阅，或在模板中使用| async 来解析数组值。参见例如angular.io/guide/observables.
我试图返回它而不是可观察的。我正在尝试将其作为 json.
你不能，因为你从网络调用中获取数据，这是异步的。
这能回答你的问题吗？ Angular 2 - Return data directly from an Observable

标签： angular typescript rxjs

【解决方案1】：

最初，在使用 observable 时，您可能会觉得您想从 observable 中取出数据并将其存储在其他地方。但是，通常这不是必需的。大多数时候，您可以简单地使用各种可管道操作符来设计发出值的行为和数据转换。

你说你想在你的组件中使用这个：

getData() {
   const listData: Array<any> = this._service.getPropertyList();
}

但是，您可以将数据定义为一个可观察的，只要数据可用就传递数据，而不是将其定义为方法：

data$: Observable<Array<any>> = this._service.getPropertyList();

这样做可以让你的组件更简单，因为组件不需要关心获取数据，它只是引用 observable，它会在数据发生变化时传递数据。

我喜欢将$ 视为一个小指标，表明这是一个“自动更新的值”（可观察到的）。

现在，而不是订阅您的组件（以前）：

this._service.getPropertyList()
 .subscribe({
   next: (result) => {
     console.log(result);
   },
   error: (err) => {
     console.log(err);
   }
})

您可以通过将 data$ 定义为可观察对象并利用 Angular 的 async 管道为您处理来自模板的订阅来简化：

data$ = this._service.getPropertyList().pipe(
   tap(result => console.log(result)),
   catchError(err => console.log(err))
});

<ul>
  <li *ngFor="let item of data$ | async">{{ item.name }}</li>
</ul>

使用的运算符：

tap - 执行任何副作用逻辑而不改变发出的值
catchError - 捕获可观察流中发生的错误

【讨论】：