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 с этим полем 21 фев 2022 в 3:08
  • ну за такой вариант я думал, по другому нету да ? нету ивента до загрузки какого можно потом сделать? 21 фев 2022 в 4:23
  • Это был самый простой вариант, можно посмотреть в сторону async-пайпа, возможно с помощью него можно разрулить логику. Можно как-то декомпозировать логику через декомпозицию компонента. Но в любом случае, нужно тогда видеть шаблон. Знать полностью текущий результат и тот, который вы хотите получить. Иначе будет сложно ответить, чтобы получилось просто и эффективно. 21 фев 2022 в 5:20
  • Можно еще воспользоваться resolver-ами, они предназначены для того, чтобы загрузить данные до того, как будет отрисован компонент 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
  • Привет, спасибо за подсказку но что-то у меня не выходит :( 22 фев 2022 в 12:54
0

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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