如何使用Angular实现复制带UI及已选值的下拉框功能

核心思路 #

• 用数组存储所有下拉框的选中值，初始数组仅保留一个空值对应原始下拉框
• 原始下拉框的选中值双向绑定到数组的第一个元素
• 点击按钮时将原始下拉框的当前选中值插入数组，页面通过*ngFor遍历数组渲染副本下拉框，默认值绑定为数组对应项的值
• 增加长度限制，保证最终页面仅同时展示两个下拉框

具体代码实现 #

组件类代码（.ts文件） #

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

@Component({
  selector: 'app-select-copy',
  standalone: true,
  imports: [FormsModule],
  templateUrl: './select-copy.component.html'
})
export class SelectCopyComponent {
  // 下拉框可选选项
  selectOptions = [
    { label: '选项1', value: 'opt1' },
    { label: '选项2', value: 'opt2' },
    { label: '选项3', value: 'opt3' },
    { label: '选项4', value: 'opt4' }
  ];
  // 存储所有下拉框的选中值，初始只有原始下拉框的空值
  selectedValueList: string[] = [''];

  addSelectCopy() {
    // 限制最多只能有2个下拉框，避免重复生成
    if (this.selectedValueList.length >= 2) return;
    // 校验是否已选中选项
    const originalVal = this.selectedValueList[0];
    if (!originalVal) {
      alert('请先选择选项后再操作');
      return;
    }
    this.selectedValueList.push(originalVal);
  }
}

如果是使用NgModule的非独立组件项目，需要在对应模块的imports数组中引入FormsModule。

模板代码（.html文件） #

<!-- 原始下拉框 -->
<div class="select-wrap">
  <select [(ngModel)]="selectedValueList[0]">
    <option value="">请选择选项</option>
    <option *ngFor="let opt of selectOptions" [value]="opt.value">{{opt.label}}</option>
  </select>
</div>

<!-- 操作按钮 -->
<button type="button" (click)="addSelectCopy()">生成下拉框副本</button>

<!-- 副本下拉框，遍历数组从第二位开始避免重复渲染原始下拉框 -->
<div class="select-wrap" *ngFor="let copyVal of selectedValueList.slice(1)">
  <select [value]="copyVal">
    <option value="">请选择选项</option>
    <option *ngFor="let opt of selectOptions" [value]="opt.value">{{opt.label}}</option>
  </select>
</div>

扩展说明 #

如果需要副本下拉框也支持修改后的值同步，可以给遍历加上索引，将副本的选中值双向绑定到selectedValueList[index+1]即可。

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