温馨提示:本文翻译自stackoverflow.com,查看原文请点击:其他 - Array of observables angular rxjs
angular rxjs

其他 - Observables数组 Angular rxjs

发布于 2020-04-10 17:56:48

我有以下代码:

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他们。

查看更多

提问者
graluc
被浏览
41
StepUp 2020-02-02 03:52

有必要:

  • 首先初始化一个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示例中可以看到