如何在 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 ，这意味着如果用户不是管理员，则显示其他用户模板，如果用户是管理员，则显示管理员用户模板。