Angular 4中如何禁用/启用下拉框？联动下拉框设置失效求助

一、基础的禁用/启用方法 #

首先要敲个重点：别用[attr.disabled]控制下拉框状态，Angular对原生表单元素的禁用推荐用[disabled]属性绑定——它直接操作DOM的禁用状态，比单纯设置HTML属性靠谱得多。

1. 固定状态的禁用/启用 #

<!-- 直接禁用下拉框 -->
<select class="custom-select" id="abc" [disabled]="true">
  <option value="" hidden>Select</option>
  <option *ngFor="let data of datay" [ngValue]="data.code">
    {{data.name}}
  </option>
</select>

<!-- 直接启用下拉框 -->
<select class="custom-select" id="abc" [disabled]="false">
  <!-- 选项内容同上 -->
</select>

2. 用组件变量动态控制 #

先在组件的.ts文件里定义控制变量：

// 组件类内部
isDropdownDisabled: boolean = false; // 默认启用，需要禁用时改true就行

然后在模板里绑定这个变量：

<select class="custom-select" id="abc" [disabled]="isDropdownDisabled">
  <!-- 选项内容同上 -->
</select>

之后你可以在任何逻辑里修改isDropdownDisabled的值（比如按钮点击、接口返回结果），就能实时切换下拉框状态。

二、根据另一个下拉框的选择联动控制 #

你要的联动场景，核心是监听触发下拉框的选中值，然后动态设置目标下拉框的[disabled]状态。下面是完整的可运行示例：

1. 组件代码（.ts） #

import { Component } from '@angular/core';

@Component({
  selector: 'app-dropdown-demo',
  templateUrl: './dropdown-demo.component.html'
})
export class DropdownDemoComponent {
  // 触发下拉框的选项列表
  triggerOptions = [
    { code: 'enable', name: '启用目标下拉框' },
    { code: 'disable', name: '禁用目标下拉框' }
  ];
  // 目标下拉框的数据源
  datay = [
    { code: 'opt1', name: '选项1' },
    { code: 'opt2', name: '选项2' },
    { code: 'opt3', name: '选项3' }
  ];
  // 存储触发下拉框的选中值
  selectedTriggerValue: string;

  // 计算属性：根据选中值判断是否禁用目标下拉框
  get isTargetDisabled(): boolean {
    // 选中"禁用"选项时返回true，否则返回false
    return this.selectedTriggerValue === 'disable';
  }
}

2. 模板代码（.html） #

<!-- 触发用的下拉框 -->
<div class="mb-3">
  <label for="triggerSelect">选择操作：</label>
  <select class="custom-select" id="triggerSelect" [(ngModel)]="selectedTriggerValue">
    <option value="" hidden>请选择</option>
    <option *ngFor="let opt of triggerOptions" [ngValue]="opt.code">
      {{opt.name}}
    </option>
  </select>
</div>

<!-- 目标下拉框 -->
<div class="mb-3">
  <label for="abc">目标下拉框：</label>
  <select class="custom-select" id="abc" [disabled]="isTargetDisabled">
    <option value="" hidden>Select</option>
    <option *ngFor="let data of datay" [ngValue]="data.code">
      {{data.name}}
    </option>
  </select>
</div>

3. 必看注意事项 #

• 如果你用了[(ngModel)]，必须在模块（比如AppModule）里导入FormsModule，不然会报错：

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // 其他导入项
    FormsModule
  ]
})
export class AppModule { }

• 你之前代码失效的原因：用了[attr.disabled]="true"，这只是在HTML标签上添了个属性，但Angular对表单元素的状态控制依赖于DOM属性绑定，[disabled]会直接操作元素的禁用状态，[attr.disabled]根本触发不了这种动态变化。

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