如何在 Angular 中使用 ngIf

Question

我是 Angular 的新手，我的問題是這個。 我必須獲取用戶的詳細信息，並根據用戶類型顯示不同的內容。

public user = [];
ngOnInit() {
   this.httpServiceToServe.getType().subscribe(
      data => this.user = data
   );
}

例如，如果此用戶是管理員，我想顯示儀表板：

<li routerLinkActive="active" *ngIf="user.type == 'admin'">
   <a routerLink="/adminDashboard">
      <i class="now-ui-icons education_atom"></i>
      <p>Admin Dashboard</p>
   </a>
</li>

Answer 1

首先，我建議您參加Angular Tour of Heroes 教程。

至於你的問題，你做的一切都是對的。 你可以在模板文件中添加兩個帶有 *ngIf 的標簽：

<div *ngIf="user.type === 'admin'">You are admin</div>
<div *ngIf="user.type !== 'admin'">Your are ordinary user</div>

所以 Angular 會檢測user.type值的變化並相應地更新視圖。 另請注意，在 Javascript/Typescipt 中使用==是一種不好的做法。 使用===代替。

但是，更好的解決方案是使用if/else ：

<div *ngIf="user.type === 'admin'; else basicUserTemplate">
    admin data
</div>
<ng-template #basicUserTemplate>
    basic user data
</ng-template>

如果您的應用中有 2 個以上的用戶角色，請使用ngSwitch

Answer 2

如果它是二進制的，您可以執行 if/else 場景的另一種方法，您可以在模板中使用以下內容。

<div *ngIf="user.type === 'admin'; else user">You are admin</div>
<ng-template #user>
  <div>Your are ordinary user</div>
</ng-template>

Answer 3

*ngIf 是 angular 框架的結構指令，它在 html dom 結構中發揮作用，無論元素是否顯示。 所以在下面

<ng-container
  *ngIf="user.type == 'admin'; then admin; else otheruser">
</ng-container>

<ng-template #admin>
  <div>
    Admin.
    <li routerLinkActive="active" >
          <a routerLink="/adminDashboard">
            <i class="now-ui-icons education_atom"></i>
            <p>Admin Dashboard</p>
          </a>
        </li>
  </div>
</ng-template>
<ng-template #otheruser>
  <div>
    other user 
  </div>
</ng-template>

如果條件不為真，元素將不會成為 html dom 的一部分並且不會顯示，如果為真，則元素將被顯示並成為 html dom 的一部分。

以上使用*ngIf/Else ，這意味着如果用戶不是管理員，則顯示其他用戶模板，如果用戶是管理員，則顯示管理員用戶模板。