您可以使用rxjs
库中的mergeMap
操作符来从一个可观察对象的可观察对象中获取一个可观察数组。下面是一个示例代码:
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { mergeMap } from 'rxjs/operators';
@Component({
selector: 'app-example',
template: `
- {{ item }}
`
})
export class ExampleComponent implements OnInit {
items$: Observable;
ngOnInit() {
// 模拟一个可观察对象的可观察对象
const source$ = new Observable>(observer => {
const innerSource1$ = new Observable(innerObserver => {
setTimeout(() => {
innerObserver.next('Item 1');
innerObserver.next('Item 2');
innerObserver.complete();
}, 1000);
});
const innerSource2$ = new Observable(innerObserver => {
setTimeout(() => {
innerObserver.next('Item 3');
innerObserver.next('Item 4');
innerObserver.complete();
}, 2000);
});
observer.next(innerSource1$);
observer.next(innerSource2$);
observer.complete();
});
// 使用mergeMap操作符将可观察对象的可观察对象转换为可观察数组
this.items$ = source$.pipe(
mergeMap(innerSource$ => innerSource$.toArray())
);
}
}
在上面的代码中,我们首先定义了一个可观察对象source$
,它发出两个可观察对象innerSource1$
和innerSource2$
。然后,我们使用mergeMap
操作符将每个可观察对象转换为可观察数组,并将结果赋值给items$
属性。最后,在模板中使用async
管道将items$
可观察对象解析为实际的数组,并使用ngFor
指令来显示每个数组项。
当组件初始化时,items$
可观察对象将被订阅,并在两个内部可观察对象完成后发出一个完整的数组,然后在模板中显示出来。