该问题通常是因为在订阅数据之前先获取了该数据,导致数据还未准备好时订阅了observable。为解决该问题,需要确保在订阅数据之前已经获取到了数据。
以下是一个示例代码,演示了如何通过RxJS的forkJoin方法等待获取完多个数据后才订阅observable,从而避免出现数据未准备好时的问题。
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { forkJoin } from 'rxjs';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
data1: any;
data2: any;
data3: any;
constructor(private http: HttpClient) {
const request1 = this.http.get('https://jsonplaceholder.typicode.com/todos/1');
const request2 = this.http.get('https://jsonplaceholder.typicode.com/todos/2');
const request3 = this.http.get('https://jsonplaceholder.typicode.com/todos/3');
// forkJoin等待多个请求完成后再进行订阅
forkJoin([request1, request2, request3]).subscribe(results => {
this.data1 = results[0];
this.data2 = results[1];
this.data3 = results[2];
});
}
}