Angular：移除select只读属性并动态填充选项的问题排查

你遇到的核心问题是同一个DOM元素不能被同时挂载到多个父元素下——你在循环里只创建了一个<option>元素，然后依次把它追加到四个select组件中，这会导致这个option最终只会留在最后一个select里（每次append都会把它从之前的父节点转移到新的父节点），前面的select自然就看不到选项了。

下面给你两种修复方案，一种是修正原生DOM操作的写法，另一种是更符合Angular设计理念的最佳实践：

方案一：修正原生DOM操作逻辑 #

我们需要为每个select单独创建独立的option元素，而不是复用同一个：

getGitlabProjects() {
  this.gitlabService.getProjects(this.gitlabUrl,this.gitlabToken).subscribe(projects => {
    this.projects = projects;
    this.btnGetProjectsClicked = true;
    console.log(projects);
    
    // 把所有select的ID存入数组，统一处理
    const selectIds = ["coreBankingProject", "customerUIProject", "adminUIProject", "clientUIProject"];
    
    selectIds.forEach(selectId => {
      const selectElement = document.getElementById(selectId);
      if (!selectElement) return; // 避免找不到元素报错
      
      // 清空原有选项
      selectElement.innerHTML = '';
      // 移除只读属性
      selectElement.removeAttribute("readonly");
      
      // 为当前select单独创建所有选项
      projects.forEach(project => {
        const option = document.createElement("option");
        option.text = project.name;
        option.value = project.name;
        selectElement.appendChild(option);
      });
    });
  });
}

方案二：Angular数据绑定（推荐） #

在Angular中直接操作DOM并不是最优解，我们可以利用数据绑定来实现需求，代码更简洁也更易维护：

1. 组件类中定义相关属性 #

// 存储四个select的项目列表（如果四个select用同一组数据，也可以共用一个数组）
projectList: any[] = [];
// 控制所有select的只读状态
isSelectReadonly = true;

2. 修改getGitlabProjects方法 #

getGitlabProjects() {
  this.gitlabService.getProjects(this.gitlabUrl,this.gitlabToken).subscribe(projects => {
    this.projects = projects;
    this.btnGetProjectsClicked = true;
    // 赋值项目列表
    this.projectList = projects;
    // 关闭只读状态
    this.isSelectReadonly = false;
  });
}

3. 修改模板中的select组件 #

<!-- 核心银行项目select -->
<select class="custom-select form-control" 
        id="coreBankingProject" 
        name="coreBankingProject"
        [readonly]="isSelectReadonly">
  <option *ngFor="let project of projectList" [value]="project.name">
    {{project.name}}
  </option>
</select>

<!-- 客户UI项目select -->
<select class="custom-select form-control" 
        id="customerUIProject" 
        name="customerUIProject"
        [readonly]="isSelectReadonly">
  <option *ngFor="let project of projectList" [value]="project.name">
    {{project.name}}
  </option>
</select>

<!-- 管理员UI项目select -->
<select class="custom-select form-control" 
        id="adminUIProject" 
        name="adminUIProject"
        [readonly]="isSelectReadonly">
  <option *ngFor="let project of projectList" [value]="project.name">
    {{project.name}}
  </option>
</select>

<!-- 客户端UI项目select -->
<select class="custom-select form-control" 
        id="clientUIProject" 
        name="clientUIProject"
        [readonly]="isSelectReadonly">
  <option *ngFor="let project of projectList" [value]="project.name">
    {{project.name}}
  </option>
</select>

这种方式通过*ngFor指令自动为每个select创建独立的option元素，[readonly]属性绑定统一控制所有select的只读状态，完全不需要手动操作DOM，更符合Angular的组件化思想。

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