* ngIf работает только иногда с asyn c pipe

Question

• 1000 .inactive] если обновляется isLoading , я вижу результат, но для ngIf прямо над ним он работает только половину времени.

У меня включено обнаружение изменений onpu sh, но это не имеет значения, также это выбор из магазина NGRX. Я сомневаюсь, что какое-либо из этих двух упоминаний является причиной, но я просто привожу факты. не работает с * ngIf постоянно, если кто-то сталкивался с этим раньше, поделитесь:)

Answer 1

Не следует ставить *ngIf= на router-outlet. Потому что ваше приложение angular будет загружать маршруты при вызове роутера. Так что вы должны поместить ngIf во вложенные компоненты.

Answer 2

Ответ был предложен в комментариях, но не как ответ. Проблема не связана с angular, это что-то более глубокое в моем коде. Пометка как завершенная, чтобы никто больше не пытался следить за этим, поскольку ответ: с кодом все в порядке, это что-то еще, где-то еще. Работа с классом, предложенным в вопросе, также является хорошей работой, если кто-то еще столкнется с чем-то похожим.

Answer 3

Попробуйте это:

<div id="overlay" ngIf="isLoading$ | async"></div>

или это:

<ng-container id="overlay" *ngIf="isLoading$ | async">

</ng-container>

или используйте span, div или обычный тег html:

<span id="overlay" *ngIf="isLoading$ | async">

Answer 4

<ng-container *ngIf="isLoading$ | async as loaded; else loading" >

<div class="page-content" [class.inactive]="loaded">
  Is Loading but with red
</div>

</ng-container>


<ng-template #loading>
  Loading stuff...
</ng-template>

Попробуйте, надеюсь, это поможет

Answer 5

, чтобы избежать двойной подписки, вы можете сделать следующее:

<ng-container *ngIf="{isLoading: isLoading$ | async} as source">
  <div id="overlay" *ngIf="sourcec.isLoading"></div>
  <div class="page-content" [class.inactive]="sourcec.isLoading">
    <router-outlet></router-outlet>
  </div>
</ng-container>