Блог

Я пытаюсь выполнить наблюдаемую цепочку / канал в зависимости от логической наблюдаемой, которая используется в условии if в шаблоне.

Но код в операторе pipe() никогда не выполняется, даже если я использую асинхронный канал для логической наблюдаемой в шаблоне.

 <div>{{isAllowed$ | async}} --- resolves to true or false and shows on html page
<div *ngIf="isAllowed$ | async>
    //other items
</div>

ngOnInit() {
    this.isAllowed$ = callToMethodThatReturnsBooleanObservalble();
  
    this.isAllowed$.pipe(
    tap(val => { // -- never gets executed
        if(val) {
            //make rest call --- never gets executed
        }
    })
)
}
  

Это работает, если я помещаю subscribe() в конец канала, но я думал, что асинхронный канал сделал это за нас.

Вам нужно добавить канал к выполняемому вами вызову:

 ngOnInit() {
  this.isAllowed$ = callToMethodThatReturnsBooleanObservalble().pipe(
    tap(val => { 
      if(val) {
           
      }
    })
  );
}
  

pipe Метод создает новый Observable , поэтому, когда вы делаете это так, как делали раньше, этот observable не сохраняется, а также не подписывается на шаблон

Вы можете использовать Rxjs Subject . Это также служит в качестве observable и может передавать данные с помощью «next» всякий раз, когда вы хотите обновить изменения данных. Нет необходимости подписываться вручную, поскольку вы используете «асинхронный» канал.

Вы можете использовать что-то подобное в своем коде.

     <div>
      <div *ngIf="(isAllowed$ | async)">
        //other items
      </div>
    </div>;
   
   // In your .ts file //
   public isAllowed$ = new Subject<boolean>();

   ngOnInit() {
      // Pass your function that returns a boolean in your subject isAllowed.
      //  and your subscription will trigger whenever there is a change
      this.isAllowed$.next(callToMethodThatReturnsBooleanObservalble());
   }