0

Проблема такая, при открытие модуля у меня сразу выполнятся запрос для информации в 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;
    });
  }
4
  • Сделайте поле в классе isInit. Выставьте его в false. После того, как выполнится запрос поставьте его в true. В шаблоне оберните весь компонент в ng-container и ngIf с этим полем Commented 21 февр. 2022 в 3:08
  • ну за такой вариант я думал, по другому нету да ? нету ивента до загрузки какого можно потом сделать? Commented 21 февр. 2022 в 4:23
  • Это был самый простой вариант, можно посмотреть в сторону async-пайпа, возможно с помощью него можно разрулить логику. Можно как-то декомпозировать логику через декомпозицию компонента. Но в любом случае, нужно тогда видеть шаблон. Знать полностью текущий результат и тот, который вы хотите получить. Иначе будет сложно ответить, чтобы получилось просто и эффективно. Commented 21 февр. 2022 в 5:20
  • Можно еще воспользоваться resolver-ами, они предназначены для того, чтобы загрузить данные до того, как будет отрисован компонент Commented 21 февр. 2022 в 5:38

2 ответа 2

0

Вариант с использованием 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

1
  • Привет, спасибо за подсказку но что-то у меня не выходит :( Commented 22 февр. 2022 в 12:54
0

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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.