Angular模板实现：数组全为false时禁用按钮的方法

你可以通过两种简洁高效的方式实现需求：

方案一：模板内直接使用数组方法 #

利用数组的every()方法直接在模板中判断所有元素是否为false，直接绑定到按钮的[disabled]属性：

组件代码修正 #

首先确保数组正确初始化（避免空值报错）：

studentArray: boolean[] = []; // 修正类型声明并初始化空数组

模板代码修改 #

<button class="btn btn-success" 
        [disabled]="studentArray.every(item => item === false)" 
        (click)="generateMarksheet()">
  Generate Marksheet 
</button>

every()方法会遍历数组所有元素，只有当**全部元素都满足item === false**时返回true，此时按钮会被禁用。

方案二：组件内封装计算属性（更易维护） #

如果后续逻辑可能变化，推荐在组件内封装一个计算属性，让模板更简洁：

组件代码 #

studentArray: boolean[] = [];

get shouldDisableButton(): boolean {
  return this.studentArray.every(item => item === false);
}

模板代码 #

<button class="btn btn-success" 
        [disabled]="shouldDisableButton" 
        (click)="generateMarksheet()">
  Generate Marksheet 
</button>

补充说明 #

• 原代码中click需要改为Angular的事件绑定语法(click)；
• 若数组可能为undefined或null，可以添加空值判断，比如studentArray?.every(...)，避免运行时报错。

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