Angular 如何在详情视图中实现状态标签的条件判断展示

Angular 12中可以通过两种方式实现需求，以下是可直接复用的代码：

方案1：使用*ngSwitch实现（更推荐，多分支场景维护成本更低） #

<div class="col-md-6">
  Current Status: 
  <ng-container [ngSwitch]="employee?.current_status">
    <span *ngSwitchCase="'Employed'" class="badge bg-success">Employed</span>
    <span *ngSwitchCase="'Inactive'" class="badge bg-warning">Inactive</span>
    <span *ngSwitchCase="'Resigned'" class="badge bg-danger">Resigned</span>
    <strong *ngSwitchDefault>N/A</strong>
  </ng-container>
</div>

方案2：使用*ngIf条件判断实现（符合你指定的if语句要求） #

<div class="col-md-6">
  Current Status: 
  <span *ngIf="employee?.current_status === 'Employed'" class="badge bg-success">Employed</span>
  <span *ngIf="employee?.current_status === 'Inactive'" class="badge bg-warning">Inactive</span>
  <span *ngIf="employee?.current_status === 'Resigned'" class="badge bg-danger">Resigned</span>
  <strong *ngIf="!employee?.current_status">N/A</strong>
</div>

注意事项 #

你只需确保当前组件所属的模块已经导入CommonModule即可正常运行以上代码，Angular 12默认生成的项目都会默认导入该模块，无需额外配置。

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