Angular中实现多输入框单选激活功能的方法

你当前的代码仅会将点击的输入框设为可用，但不会禁用之前激活的输入框，需要调整逻辑确保同一时间只有一个输入框处于可用状态，以下是两种实现方式：

方案一：用单个变量记录激活索引（简洁高效） #

这种方式无需维护数组，仅通过一个变量跟踪当前激活的输入框索引，性能更优。

组件TS代码 #

// 初始状态无激活输入框，用-1表示
public activeInputIndex: number = -1;

public enable(index: number) {
  // 更新激活索引为当前按钮对应的输入框下标
  this.activeInputIndex = index;
}

HTML模板 #

<input type="text" [disabled]="activeInputIndex !== i">
<button title="Modifier" (click)="enable(i)">EDIT</button>

方案二：维护布尔数组（兼容现有代码结构） #

如果希望延续你原有的数组逻辑，每次点击时先重置所有输入框为禁用状态，再激活当前目标输入框：

组件TS代码 #

// 初始化布尔数组，所有元素默认false（输入框禁用）
public toggleInputs: boolean[] = [];

// 在组件初始化时根据输入框数量填充数组（示例假设3个输入框）
ngOnInit() {
  const inputCount = 3; // 替换为你的实际输入框数量
  this.toggleInputs = Array(inputCount).fill(false);
}

public enable(index: number) {
  // 先将所有输入框设为禁用
  this.toggleInputs = this.toggleInputs.map(() => false);
  // 再激活当前点击的输入框
  this.toggleInputs[index] = true;
}

HTML模板 #

<input type="text" [disabled]="!toggleInputs[i]">
<button title="Modifier" (click)="enable(i)">EDIT</button>

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