由于 Angular 中的服务调用延迟，阵列未正确更新

Question

我在 angular 中使用 while 循环多次调用相同的服务，但由于 API 的响应延迟，我的数组没有正确更新。我想在 while 循环和所有服务响应完成后调用某些语句集。

 GetData(){
    var xyz = [];
    var pqr = [];
    this.startRow = 0;
    this.names=[];
    while(this.startRow <= this.num)
    {
      this.getEmpData();
      this.startRow = this.startRow + this.countRow;
      console.log("Pass1");
      console.log(this.names);
    }
    //due to delay in API response name array is coming as empty
    this.names.forEach(value => {
      xyz.push(value);
    });
   
  }
  getEmpData()
  {    
     this.empService.getEmpData(this.startRow,this.countRow,this.id,this.search).subscribe(data => {
        this.resp = data;
        this.names = this.names.concat(this.resp); 
        console.log(this.names);   
      })
   
  }

回应

Pass1
[]
Pass1
[]
(20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
(40) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

我希望仅在 while 循环中更新名称，或者在名称数组更新后执行 while 循环之后的语句。请帮我解决给定的问题。

Answer 1

尝试在您的 getEmpData() 方法中使用异步等待：

 async getEmpData()
  {    
      const data = await this.empService.getEmpData(this.startRow,this.countRow,this.id,this.search).toPromise();
      this.resp = data;
      this.names = this.names.concat(this.resp); 
      console.log(this.names);
  }

Answer 2

您可以像下面这样实现：

使用expand运算符，在条件有效时重复调用getEmpData方法。
使用 reduce 运算符 “在源 Observable 上应用累加器函数，并 returns 在源完成时累积结果，给定一个可选的种子值。”
Return 来自 getEmpData 方法的可观察对象，而不是订阅它。

getData() {
  var xyz = [];
  var pqr = [];
  this.startRow = 0;
  this.names = [];

  this.getEmpData()
    .pipe(
      expand(() => {
        this.startRow = this.startRow + this.countRow;
        return this.startRow <= this.num ? this.getEmpData() : EMPTY;
      }),
      reduce(acc => acc)
    )
    .subscribe(() => {
      xyz.push(...this.names);
    });
}

getEmpData(): Observable<any> {
  return this.empService
    .getEmpData(this.startRow, this.countRow, this.id, this.search)
    .pipe(
      tap(data => {
        this.resp = data;
        this.names = this.names.concat(this.resp);
        console.log(this.names);
      })
    );
}

由于 Angular 中的服务调用延迟，阵列未正确更新

Array is not updating properly due to delay in service calls in Angular

angular

typescript

rxjs

angular8