Angular - Как получить HTML прослушивание наблюдаемого

Question

В приложении, над которым я работаю, есть меню верхней панели, где отображается информация о пользователе, если пользователь вошел в систему, отображается изображение и имя. Если вы не авторизуетесь, появится кнопка «войти».

Однако, чтобы проверить изменения, страницу необходимо обновить. Я пришел к мысли, что использовать наблюдаемый объект, поэтому он изменяется динамически, так как он должен прослушивать все время.

app.component.ts

isLoggedIn;
 subscription= this.authService.dataofIsLoggedIn.subscribe(data =>{
    this.isLoggedIn = data;
 });        

 ngOnInit(){
        this.authService.currentUser.subscribe(data => {
          var User = data;
          this.menuItem = [];
            if(User){
             console.log("do user stuff");
          }
        });
      }

app.component. html

<span class="VCenterFlex">
  <button
    (click)="router.navigate(['/auth/login'])"
    *ngIf="!isLoggedIn"
    mat-raised-button
    color="accent"
  >
    Login <mat-icon>meeting_room</mat-icon>
  </button>
  <div class="avatarimageContainer_parent">
  <div
    class="avatarimageContainer"
    *ngIf="isLoggedIn"
    (click)="router.navigate(['/profile'])"
  >
    <img class="avatarimage" src="{{ user.avatar }}" />
    <img class="settings_avatar_top" src="../assets/img/settings_icon.png">
  </div>

  </div>

  <h6 style="margin-right: 5px;" *ngIf="isLoggedIn">
    Hi, {{ user.name }}.
  </h6>
  <button
    *ngIf="isLoggedIn"
    (click)="authService.logout()"
    type="button"
    mat-raised-button
    color="accent"
  >
    <mat-icon>exit_to_app</mat-icon> Logout
  </button>
</span>

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

Answer 1

Вы можете использовать AsyncPipe в своем шаблоне. С помощью AsyncPipe мы можем использовать обещания и наблюдаемые непосредственно в нашем шаблоне, без необходимости сохранять результат в промежуточном свойстве или переменной. Вы будете использовать что-то вроде этого:

{{ obj_expression | async }}

где obj_expression может быть вашим наблюдаемым, обещанием или субъектом.