Angular中基于字符串数组渲染下拉选项，选中时设置输入框disabled失效

1. disabled 属性的操作逻辑错误：HTML中disabled是布尔属性，只要该属性被添加到DOM元素上，无论赋值为"false"还是其他字符串，元素都会保持禁用。你代码里setAttribute('disabled', 'false')不仅不会启用输入框，反而会因为原静态写的disabled属性已经存在，操作完全无效果。
2. 直接操作原生DOM的方式不符合Angular的设计范式：Angular的视图状态完全由组件类的成员变量驱动，直接通过getElementById修改DOM会脱离框架的变更检测体系，无法实现状态和视图的自动同步。
3. 变更逻辑存在遗漏：仅处理了选中非首项时启用输入框的分支，没有处理选回首项时恢复输入框禁用的场景。

组件类 TypeScript 代码 #

用组件状态变量替代直接DOM操作，初始设置输入框为禁用状态：

// 新增状态标记，默认输入框禁用
isInputDisabled = true;
// 你已有的成员变量
selectedValue: string = '';
listeOfString: string[] = [];
myString: string = '';

onChange(): void {
  // 直接根据选中值更新状态，无需操作DOM
  this.isInputDisabled = this.selectedValue === this.listeOfString[0];
}

模板 HTML 代码 #

将静态的disabled属性替换为状态绑定，让Angular自动完成DOM状态更新：

<select [(ngModel)]="selectedValue" (ngModelChange)="onChange()">
  <option *ngFor="let string of listeOfString" [value]="string">
    {{ string }}
  </option>
</select>
<!-- 移除硬编码的静态disabled，替换为动态绑定 -->
<input type="text" id="myInput" [(ngModel)]="myString" [disabled]="isInputDisabled"/>

• 原代码的<option>标签未显式绑定value属性，虽然默认会把文本内容作为绑定值，但显式增加[value]="string"可以避免选项文本带空格、特殊字符时的绑定异常。
• 完全不需要引入原生DOM操作逻辑，Angular的双向绑定和属性绑定机制会自动处理视图更新，代码可维护性更高，也不会出现状态不同步的问题。

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