问题描述: 当使用Angular 9和RxJs的组合2个可观察对象时,会产生数据,但异步管道始终看到空结果。
解决方法:
map
,switchMap
等。import { map, switchMap } from 'rxjs/operators';
switchMap
操作符将一个可观察对象映射为另一个可观察对象。import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { switchMap } from 'rxjs/operators';
@Component({
selector: 'app-your-component',
template: `
{{ data$ | async }}
`,
})
export class YourComponent {
data$: Observable;
constructor(private service: YourService) {
this.data$ = this.service.getFirstObservable().pipe(
switchMap((firstData) => {
return this.service.getSecondObservable(firstData);
})
);
}
}
在上面的示例中,我们使用switchMap
操作符将第一个可观察对象的结果映射为第二个可观察对象。这样,当第一个可观察对象发出新的值时,第二个可观察对象会自动订阅并发出相应的结果。
确保你的YourService
中的getFirstObservable
和getSecondObservable
方法返回的是可观察对象。比如:
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root',
})
export class YourService {
getFirstObservable(): Observable {
// 返回第一个可观察对象
}
getSecondObservable(firstData): Observable {
// 返回第二个可观察对象
}
}
通过以上步骤,你应该能够正确地组合2个可观察对象并获取到数据。如果仍然遇到问题,请检查控制台是否有任何错误信息,并确保你的可观察对象发出了正确的值。