可觀察的數組 angular rxjs

Question

我有以下代碼：

export class GetPersonsService {
  url="https://swapi.co/api/people/";
  personsObservables;
  headers: HttpHeaders = new HttpHeaders()
    .set('Accept', 'application/json');
  constructor(private http:HttpClient) { }
  getPerson(personIndex){
    return this.http.get<Person>(`${this.url}${personIndex}`,{headers:this.headers});
  }
  getPersons(){
    for(let i=0;i<10;i++){
      this.personsObservables.push(this.getPerson(i));
    }
    console.log(this.personsObservables);
    return forkJoin(this.personsObservables);
  }
}

我不明白為什么 this.personsObservables 是未定義的，因為如果我調用 getPerson(1) 我正在觀察。下一個問題如果有 10/100 或更多項目，如何維護 api 並且我想檢測有多少是他們。

Answer 1

有必要：

• 首先初始化一個url數組以避免undefined錯誤
• 然后await API 調用getPerson (i)`
• 那么你可以使用forkJoin 。

所以代碼應該是這樣的：

const personsObservables = [];

async getPersons(){
    for(let i=0;i<10;i++){
        this.personsObservables.push(await this.getPerson(i));
    }
    console.log(this.personsObservables);
    return forkJoin(this.personsObservables);
}

讓我舉個例子：

const request1 = this.http.get('https://restcountries.eu/rest/v1/name/india');
const request2 = this.http.get('https://restcountries.eu/rest/v1/name/us');
const request3 = this.http.get('https://restcountries.eu/rest/v1/name/ame');
const request4 = this.http.get('https://restcountries.eu/rest/v1/name/ja');

const requestArray = [];
requestArray.push(request1);
requestArray.push(request2);
requestArray.push(request3);
requestArray.push(request4);

forkJoin(requestArray).subscribe(results => {
  console.log(results);
  this.response = results;
});

所有結果都按順序排列，將項目推送到requestArray. 它可以在stackblitz 示例中看到。

Answer 2

請按以下步驟操作。

export class GetPersonsService {
  headers: HttpHeaders = new HttpHeaders().set("Accept", "application/json");
  url = "https://swapi.co/api/people/";
  personsObservables: Person[] = [];

  constructor(private http: HttpClient) {}

  getPerson(personIndex: number) {
    this.http
      .get<Person>(`${this.url}${personIndex}`, { headers: this.headers })
      .subscribe(data => {
        this.personsObservables.push(data);
      });
  }

  getPersons() {
    for (let i = 0; i < 10; i++) {
      this.getPerson(i);
    }
    console.log(this.personsObservables);
  }
}