Angular新手求助：*ngIf与ng-show无法控制div显示隐藏问题

嘿，刚接触Angular对吧？我帮你看看问题出在哪～

首先，你遇到的核心问题是用错了指令——ng-show是AngularJS（1.x老版本）里的指令，而你现在用的是Angular（2+），这个版本已经不再支持ng-show了，所以你的条件判断根本不会生效，这就是两个div都藏不住的原因。

另外还要注意一个细节：你说isnurse字段返回的是字符串"true"，不是布尔值true，直接写user.isnurse == true会因为类型不匹配导致判断结果不对（在JavaScript里，字符串"true"和布尔值true用==比较会返回false）。

给你两种正确的实现方式，按需选就行：

方式一：用*ngIf（推荐） #

*ngIf会直接把元素从DOM里添加或移除，适合不需要保留元素占位的场景：

<div *ngIf="user">
  <img src="assets/logo.png">
  <h1>Hello {{user.firstName}}, {{user.isnurse}}</h1>
  <a href="/api/auth/signout">Signout</a>
  <!-- 改成*ngIf，并且判断字符串"true" -->
  <div *ngIf="user.isnurse === 'true'">
    <h1>DO NURSE THINGS</h1>
    <ul>
      <li><a [routerLink]="['/articles']">List Articles</a></li>
    </ul>
  </div>
  <!-- 非护士内容的判断反过来 -->
  <div *ngIf="user.isnurse !== 'true'">
    <h1>DO REGULAR USER THINGS</h1>
  </div>
</div>

方式二：用[hidden] #

如果你需要保留元素在DOM里，只是视觉上隐藏（比如要保留元素的布局位置），可以用[hidden]：

<div *ngIf="user">
  <img src="assets/logo.png">
  <h1>Hello {{user.firstName}}, {{user.isnurse}}</h1>
  <a href="/api/auth/signout">Signout</a>
  <div [hidden]="user.isnurse !== 'true'">
    <h1>DO NURSE THINGS</h1>
    <ul>
      <li><a [routerLink]="['/articles']">List Articles</a></li>
    </ul>
  </div>
  <div [hidden]="user.isnurse === 'true'">
    <h1>DO REGULAR USER THINGS</h1>
  </div>
</div>

小建议：如果能让后端把isnurse改成返回布尔值true/false就更好了，这样前端判断会更直观，不用处理字符串匹配的问题～

内容的提问来源于stack exchange，提问作者Robert Riemens