Angular中使用ng-if切换样式类：API数据状态显示无结果

我来帮你排查下这个问题～你用ng-if没显示内容，大概率是写法细节或者数据绑定环节出了小问题，给你几个实用的解决思路：

• 先确认数据是否正确绑定
  先别急着写样式，在<td>里直接输出{{x.exist}}，看看页面上有没有显示true或false。如果没输出，说明你的x变量没正确拿到API返回的数据——比如是不是*ngFor遍历的数组没赋值，或者API返回的字段名不是exist（比如拼写错成exists了）。

• 修正ngIf的写法（别漏了星号！）
  Angular的结构型指令ngIf必须带星号*ngIf，如果漏了星号，Angular根本识别不了这个指令，自然不会渲染内容。正确的写法应该是两个span分别判断：

  <td>
    <span *ngIf="x.exist" class="label label-success status-active" title="Active">{{x.exist}}</span>
    <span *ngIf="!x.exist" class="label label-default status-disabled" title="Disabled">{{x.exist}}</span>
  </td>
  

• 更简洁的替代方案：用ngClass动态绑定
  其实没必要写两个span，用ngClass动态切换类名，代码更简洁也不容易出错，还能统一管理逻辑：

  <td>
    <span 
      [ngClass]="{
        'label label-success status-active': x.exist,
        'label label-default status-disabled': !x.exist
      }"
      [title]="x.exist ? 'Active' : 'Disabled'"
    >
      {{x.exist}}
    </span>
  </td>
  

• 检查数据类型是否为布尔值
  有时候API返回的exist可能是字符串类型的"true"或"false"，而不是布尔值。这时候x.exist的判断会出错（因为字符串"false"在布尔逻辑里是true）。你可以在组件里打印console.log(typeof x.exist)确认类型，如果是字符串，判断的时候要写成x.exist === 'true'。

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