Angular Material树形组件中Font Awesome图标插值切换失效问题

这个问题我之前也碰到过，核心原因是插值绑定的表达式没被Angular变更检测及时捕捉到，导致节点展开/折叠时图标状态无法立即更新。下面给你几个可靠的解决方案：

方案1：用NgClass替代插值绑定class #

把原来的插值class改成NgClass指令绑定，Angular会更精准地追踪状态变化：

<i class="fas" [ngClass]="treeControl.isExpanded(node) ? 'fa-chevron-down' : 'fa-chevron-right'"></i>

也可以用对象语法的形式，可读性更强：

<i [ngClass]="{
  'fas': true,
  'fa-chevron-down': treeControl.isExpanded(node),
  'fa-chevron-right': !treeControl.isExpanded(node)
}"></i>

方案2：给mat-icon的fontIcon用属性绑定 #

如果你想继续使用mat-icon组件，把插值改成属性绑定（方括号[]），而非字符串插值：

<mat-icon [fontIcon]="treeControl.isExpanded(node) ? 'fa-chevron-down' : 'fa-chevron-right'"></mat-icon>

为什么原来的方式不行？ #

Angular的变更检测对插值表达式（{{ }}）的追踪优先级低于属性绑定。当你点击节点切换展开状态时，treeControl.isExpanded(node)的返回值确实改变了，但插值绑定没有触发即时的视图更新。只有当父组件的变更检测被触发（比如折叠顶层再展开），子节点的视图才会刷新，这就是你看到延迟更新的原因。

极端情况的兜底方案（不推荐优先使用） #

如果上面的方案都没解决问题，可以手动触发变更检测。在组件中注入ChangeDetectorRef，在节点切换后强制刷新视图：

import { Component, ChangeDetectorRef } from '@angular/core';
import { FlatTreeControl } from '@angular/cdk/tree';

@Component({
  // 你的组件元数据
})
export class YourTreeComponent {
  treeControl = new FlatTreeControl<...>(/* 你的配置 */);

  constructor(private cdr: ChangeDetectorRef) {}

  // 自定义切换方法或监听toggle事件时调用
  onToggleNode(node: any) {
    this.treeControl.toggle(node);
    this.cdr.detectChanges(); // 强制触发变更检测
  }
}

不过优先用前两个方案，手动触发变更检测会增加不必要的性能开销，尽量让Angular自动处理视图更新。

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