Question

只要用户通过身份验证，我就使用以下代码显示项目。

<div *ngIf="auth.user | async as user" class="px-3 pt-3">
  <h4 class="font-weight-light">{{ user.displayName }}</h4>
</div>

一切正常。但是，如果我想在用户未通过身份验证时放置内容，会发生什么情况？这有什么相反？

我尝试了以下操作，但没有用：

<mat-nav-list *ngIf="!auth.user | async as user">
  <a mat-list-item (click)="selected()" [routerLink]="['/']">
  <i class="material-icons-outlined mr-2">event</i>Login
  </a>
</mat-nav-list>

Answer 1

您需要用parenthesis包裹整个语句，以在语句上应用not（`！1）。

<mat-nav-list *ngIf="!(auth.user | async)">
  <a mat-list-item (click)="selected()" [routerLink]="['/']">
  <i class="material-icons-outlined mr-2">event</i>Login
  </a>
</mat-nav-list>

如果要在标记中的同一位置显示它们，请使用else part。

<div *ngIf="(auth.user | async) as user;else notauthorized" class="px-3 pt-3">
  <h4 class="font-weight-light">{{ user.displayName }}</h4>
</div>
<ng-template #notauthorized>
  <mat-nav-list *ngIf="!auth.user | async as user">
    <a mat-list-item (click)="selected()" [routerLink]="['/']">
    <i class="material-icons-outlined mr-2">event</i>Login
    </a>
  </mat-nav-list>
</ng-template>

* ng如果auth用户反向

1 个答案: