Переменные компонента не определены внутри функции подписки

Question

Я делаю вызов API внутри ngOnInit в моем компоненте. API возвращает массив типа Player.

Каждый Player объект имеет свойство Position. Я отображаю результат вызова API в switchMap из rxjs, в переменные компонента с именем players.

В .subscribe я пытаюсь перебрать результат и .push объект в другой массив компонентов, в зависимости от свойства position player.

Однако каждый из массивов позиций (goalkeepers, defenders, midfielders, forwards) не определен при попытке push объекта.

    this.http.get<Player[]>(url)
      .pipe(
        switchMap(result => {
          return this.players = result;
        })
      )
      .subscribe(result => {
        for (let i = 0; i < this.players.length; i++) {
          if (this.players[i].position == 1) {
            this.goalkeepers.push(result[i]);
          }
        }
      }, error => console.error(error));

this.players и this.goalkeepers имеют тип player[].

Здесь я понимаю, что цикл for будет продолжать проходить через каждого игрока в this.players и назначать их соответствующему массиву позиций, но массивы позиций не определены.

В этом случае ошибка читается как Cannot read property 'push' of undefined. Итак, я понимаю, что this.goalkeepers не определено.

Answer 1

Нет необходимости в switchMap(), вы можете установить свойство players в tap() в наблюдаемом.Чтобы вставить данные в goalkeepers, вы должны сначала инициализировать их.

this.goalkeepers: Player[] = []    

this.http.get<Player[]>(url).pipe(
        tap(result => this.player = result)
      )
      .subscribe(result => {
        for (let i = 0; i < this.players.length; i++) {
          if (this.players[i].position == 1) {
            this.goalkeepers.push(result[i]);
          }
        }
      }, error => console.error(error));

Использование tap() для установки players полезно, если у вас есть несколько подписок на this.http.get<Player[]>(url), и вы не хотите назначатьplayers индивидуально (что вы можете сделать под самим subcription).Если есть только одна подписка, тогда назначение под подпиской будет в порядке.