Запрос POST не закончился а страницу уже загрузило Angular 2

Question

Проблема такая, при открытие модуля у меня сразу выполнятся запрос для информации в select и получается там пусто, но возможно как-то сделать пока запрос не закончился что бы он модуль не отрисовал ?

  ngOnInit(): void {
    this.gameAccounts();
    this.totalPrice = this.price;

    console.log(this.gameAccountsArray);
    console.log(this.gameAccountsArray[1].account);

  }

  gameAccounts() {
    this.acpService.gameAccounts()
    .subscribe((data: any) => {
      this.gameAccountsArray = data.gameAccounts;
    });
  }

Answer 1

Вариант с использованием async-пайпа. Предпочтительней, так как angular сам сделает все необходимые отписки для избежания утечек памяти. Также возможен вариант с тем, чтобы обернуть не весь компонент, а только ту часть, которая ожидает эти данные.

ngOnInit(): void {
  this.gameAccountsArray$ = this.gameAccounts();
  ...
}

gameAccounts$() {
  return this.acpService.gameAccounts().pipe(map((data) => data.gameAccounts));
}

<div *ngIf="gameAccountsArray$ | async">
  ...Остальной код компонента
</div>

Также возможно, что не нужно будет оборачивать весь компонент, а передать данные в компонент, который их использует.

<select
[someInput]="gameAccountsArray$ | async"
>
...
</select>

Также можно сделать костыльный вариант с использованием флага-инициализации. По сути такой же вариант, что и с this.gameAccountsArray$, только сделать специальное поле initialize

Answer 2

Можно использовать резолвер на уровне роута. Пока не отработают все резолверы, роут не загрузится.

БЛОГ НА HUSL

Запрос POST не закончился а страницу уже загрузило Angular 2

Ответы (2 шт):