Angular中如何通过函数动态绑定按钮的[disabled]属性？

你当前写法失效的原因很明确：this['auth' + button.authLevel + '()']是在尝试访问一个带括号的属性名（比如auth100()），而不是调用auth100这个函数。要让函数返回值绑定到disabled属性，你需要先获取到函数引用，再执行它。

下面是几种可行的解决方案：

方案1：直接获取函数并调用 #

修改模板中的绑定逻辑，先通过字符串拼接拿到对应的函数，再加上括号执行：

<mat-button-toggle *ngFor="let button of buttons" 
                   [disabled]="this['auth' + button.authLevel]()">
  {{button.displayName}}
</mat-button-toggle>

这里的逻辑是：

• this['auth' + button.authLevel]会根据button.authLevel的值（比如'100'）获取到组件中的auth100函数引用
• 后面的()会立即执行这个函数，将返回值绑定到disabled属性上

方案2：封装成统一的状态获取方法（更易维护） #

如果按钮数量较多，或者需要做容错处理，建议在组件中封装一个专门的方法来返回禁用状态：

组件代码： #

// 定义方法，接收authLevel参数，返回对应的禁用状态
getIsButtonDisabled(authLevel: string): boolean {
  // 拼接函数名并获取函数引用，同时做类型断言
  const authFunction = this['auth' + authLevel] as (() => boolean) | undefined;
  
  // 如果存在对应的函数就执行，否则返回默认值（比如false）
  return authFunction ? authFunction() : false;
}

// 你的原有函数（注意确保this指向正确，推荐用箭头函数）
auth100 = () => {
  const result = this.complicatedStuff();
  return result;
}

auth200 = () => {
  return false;
}

模板代码： #

<mat-button-toggle *ngFor="let button of buttons" 
                   [disabled]="getIsButtonDisabled(button.authLevel)">
  {{button.displayName}}
</mat-button-toggle>

这种写法的好处是：

• 逻辑更清晰，便于后续修改和调试
• 可以处理authLevel不存在对应函数的异常情况
• 用箭头函数定义auth100、auth200能确保函数内部的this始终指向组件实例，避免上下文丢失

注意事项 #

• 如果你的组件使用了ChangeDetectionStrategy.OnPush，需要确保当函数依赖的变量变化时，变更检测能触发（比如手动调用changeDetectorRef.markForCheck()）
• 避免在绑定函数中执行过于复杂的逻辑，否则可能会在每次变更检测时重复执行，影响性能。如果逻辑复杂，可以考虑将结果缓存到变量中，结合ngOnChanges或其他生命周期钩子更新缓存

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