如何在forloop angular 7中使用可观察的订阅

时间:2018-11-05 11:48:52

标签: angular angular7 angular-observable

我有一个数组用户:

[0: {id:123, firstname:'xyz', lastname:'abc'}, 1:{id:456, firstname:'foo', lastname:'bar'}, 3:{id:567, firstname:'bar', lastname:'baz'}]

我必须遍历此数组并调用服务API以获取用户约会。

方法1 我认为这不是最佳做法,但可以解决问题

let userAppointments = []
  for (let user of this.users) {

    this._service
      .getUsersAppointments(
        {
          date: this.todayDate,
          id: user.id
        },
        this.token
      )
      .subscribe(res => {

       // Modifying array as per requirements-----

        userAppointments.push({
          id: user.id,
          name: `${user.firstname} ${user.lastname}`,
          appointments: res
        });
      });

  }

  this.appointments = userAppointments 

方法2:使用 forkJoin

问题:当我最终获得所有呼叫的响应时,我无法访问用户的名字和姓氏。我需要在我的最终数组this.appointments中找到这些详细信息,即在我要分配res to this.appointments

的地方订阅之后
        forkJoin(
    this.users
      .map(res =>
        this._service.getUsersAppointments(
          {
          date: this.todayDate,
          id: res.id

          },
          this.token
        )
      )
      .map(response => response)
  ).subscribe(res => {

    // how can I access 'user object' keys like: firstname, id here--------------

    this.appointments = res;

  });

如果我的问题不清楚,请告诉我。

方法2引用了SO answercodereview question

1 个答案:

答案 0 :(得分:5)

forkJoin仅在传递给它的所有Observables完成时才发出一次。它发出Array,其元素是每个Observable在完成之前发出的值的结果。发出的Array的关键特征是元素的顺序与构造forkJoin时传递的Observable的顺序相同(类似于Promise.all())。这样可以很好地解决您遇到的问题。 您可以遍历forkJoin的结果,对于每个索引,从用户数组中选择相应的元素,并将用户属性分配给结果对象。 尽管可以直接在上述方法2的订阅调用中完成此操作。更好的解决方案是将这段代码移到使用Observable.create方法创建的新Observable中。这将阻止您在订阅forkJoin(ed)Observable的任何地方编写迭代逻辑。我已经在这个demo here堆栈闪电战中重新创建了相同的场景。在控制台上检出所需的输出。