Question

我是新手，我的问题是这个。我必须获取用户的详细信息，并且该用户的类型不同才能显示不同的内容

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

}

如果此用户是admin，请显示admin仪表板

<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 tutorial。

关于您的问题，您所做的一切正确。您可以在模板文件中添加两个带有* 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>

如果您的应用中有两个以上的用户角色，请使用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是角度框架的结构指令，无论元素是否显示，它都在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>

如果条件不为true，则元素不会成为html dom的一部分并且不会显示；如果为true，则将显示元素并将其成为html dom的一部分。

上面使用*ngIf/Else，这意味着如果用户不是admin，则显示其他用户模板，如果用户是admin，则显示admin用户模板。

如何在angular中使用ngIf

3 个答案: