Angular TypeScript报错：Type 'boolean'不可赋值给'() => boolean'

错误原因 #

你遇到的错误提示Type 'boolean' is not assignable to type '() => boolean'，是因为当前获取到的Checkbox实例的checked属性是返回布尔值的函数类型，而非直接的布尔值类型，直接赋值false会导致类型不匹配。

解决方案 #

根据你使用的Checkbox组件类型，选择对应的解决方式：

1. 调用组件自带的状态设置方法 #

如果你的Checkbox组件提供了专门设置选中状态的方法（比如setChecked、toggle等），直接调用方法传入布尔值：

private disableNotResponsible(rowIndex: number): void {
  this.NotRes.toArray()[rowIndex].setChecked(false);
}

2. 利用ControlValueAccessor接口的writeValue方法 #

如果组件实现了Angular的ControlValueAccessor接口（大部分表单组件都会实现），可以用writeValue方法更新值：

private disableNotResponsible(rowIndex: number): void {
  this.NotRes.toArray()[rowIndex].writeValue(false);
}

3. 确认Checkbox组件的类型导入是否正确 #

如果是误用了组件类型（比如把自定义Checkbox和第三方UI库的Checkbox搞混），先确认导入的组件类型是否正确。例如使用Angular Material的复选框：

// 正确导入组件类型
import { MatCheckbox } from '@angular/material/checkbox';

export class InboxComponent implements AfterViewInit {
  @ViewChildren('NotRes')
  NotRes: QueryList<MatCheckbox>;

  private disableNotResponsible(rowIndex: number): void {
    // MatCheckbox的checked是布尔值，可直接赋值
    this.NotRes.toArray()[rowIndex].checked = false;
  }
}

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