Angular 12 使用*ngIf搭配mat-icon、mat-content时图标不显示问题排查

问题原因&修复方案 #

你遇到的异常是两个写法错误导致的：

• 错误1：matTooltip输入属性没有做绑定
  你当前的写法matTooltip={{element.date}}没有加方括号，Angular会将其识别为静态字符串属性，当变量解析异常时会直接导致整个mat-icon组件渲染失败，出现空白。
• 错误2：使用了非标准的mat-content标签
  Angular Material没有提供通用的<mat-content>文本容器标签，部分版本下该标签的渲染异常会影响同单元格内其他组件的正常展示。

修复后的状态列代码 #

<ng-container matColumnDef="status">
  <th mat-header-cell *matHeaderCellDef> 状态 </th>
  <td mat-cell *matCellDef="let element">
    <mat-icon 
      *ngIf="element.status === 'Yes'" 
      [ngStyle]="{'color':'green'}" 
      matTooltipPosition="right"
      matTooltipClass="mattooltip" 
      [matTooltip]="element.date"
    >done_outline</mat-icon>
    <mat-icon 
      *ngIf="element.status === 'No'" 
      [ngStyle]="{'color':'orange'}" 
      matTooltipPosition="right"
      matTooltipClass="mattooltip" 
      [matTooltip]="element.date"
    >report_problem</mat-icon>
    <span *ngIf="element.status === 'Not Applicable'">N/A</span>
  </td>
</ng-container>

额外优化建议 #

建议你把判断条件的==替换为严格相等===，避免因隐式类型转换出现意料之外的判断错误。

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