Angular 13中*ngFor内Mattooltip失效且复选框禁用问题求助

正确模板写法示例 #

先确保条件绑定语法正确，避免和disabled属性混淆：

<mat-checkbox 
  *ngFor="let sample of sampleList"
  [matTooltip]="sample.sampleAvailability.name === 'Checked-in' ? 'This sample is available' : 'This sample is checked out'"
>
  {{ sample.label }}
</mat-checkbox>

排查关键问题点 #

• 检查模块导入完整性
  必须在当前组件所属的NgModule中同时导入MatTooltipModule和MatCheckboxModule，缺一不可：

  import { NgModule } from '@angular/core';
  import { MatCheckboxModule } from '@angular/material/checkbox';
  import { MatTooltipModule } from '@angular/material/tooltip';
  // 其他必要模块导入
  
  @NgModule({
    imports: [
      MatCheckboxModule,
      MatTooltipModule,
      // ...其他模块
    ],
    declarations: [YourComponent]
  })
  export class YourModule { }
  

• 验证条件逻辑准确性

  • 临时在模板中添加{{ sample.sampleAvailability.name }}，确认该字段实际值是否和判断的'Checked-in'完全匹配（注意大小写、空格等细节）。
  • 如果sampleAvailability可能为undefined或null，要添加空值保护避免表达式报错：

    [matTooltip]="sample.sampleAvailability?.name === 'Checked-in' ? 'This sample is available' : 'This sample is checked out'"
    

• 排查是否误绑定disabled属性
  很多情况是不小心把tooltip的条件写到了[disabled]上，导致复选框被禁用。检查模板中是否存在类似[disabled]="sample.sampleAvailability.name === 'Checked-in'"的错误绑定。

• 查看浏览器控制台报错
  打开开发者工具Console面板，检查是否有模板解析错误、模块未找到等报错，这类错误会直接导致组件功能异常。

• 确认版本兼容性
  Angular 13必须搭配13.x版本的Angular Material，版本不匹配会引发组件行为异常。可以在package.json中检查@angular/material的版本是否为^13.x.x。

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