修改并返回Observable:Angular中的数据

Question

我有一个服务来获取属性列表，在该服务中，我使用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();
}

Answer 1

最初，在处理可观察对象时，可能会觉得您想从可观察对象中获取数据并将其存储在其他地方。但是，通常这是没有必要的。大多数情况下，您可以简单地使用各种可管道操作符来设计发射值的行为和数据转换。

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

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

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

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

这样做会使您的组件更简单，因为组件不需要关心获取数据，它只需引用可观察的数据，它将在数据发生任何变化时传递数据。

我喜欢把CCD_ 1看作一个小指示符；自动更新的值"；(可观察的(。

现在，不是订阅您的组件(以前(：

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-可观察流中发生的捕获错误