基于Angular实现点击按钮动态新增下拉菜单的方案咨询

用*ngFor控制数组跟踪新增下拉实例是完全符合Angular开发规范的最优方案，避免手动操作DOM，也更方便后续统一收集所有下拉组的配置数据。

第一步：修改TS代码 #

先定义单个下拉组的状态接口，再把零散的状态变量替换为数组存储，新增按钮对应的push方法：

// 先定义单个属性配置项的接口，存储每个下拉组的独立状态
interface AttrConfig {
  attributeSelected: string;
  groupTypeValue: string;
  attributeField: string;
}

export class DropDownComponent {
  groupValues = ['All Values', 'Explicit Values', 'Ranges'];
  attributes = ['startTimeIso', 'speedTime', 'subscriberId', 'chargeNumber'];
  // 存储所有新增的下拉组配置，默认放一个初始项
  public attrConfigList: AttrConfig[] = [];
  public allValues: AllValues;

  constructor() {
    // 初始化默认加一个配置项
    this.addNewAttr();
  }

  // 点击新增按钮调用的方法，往数组里加新的默认配置项
  public addNewAttr() {
    this.attrConfigList.push({
      attributeSelected: this.attributes[0],
      groupTypeValue: this.groupValues[0],
      attributeField: this.attributes[0]
    });
  }

  // 更新指定索引的属性选中值
  public updateAttributeSelected(event: Event, index: number) {
    const target = event.target as HTMLSelectElement;
    this.attrConfigList[index].attributeSelected = target.value;
    this.attrConfigList[index].attributeField = target.value;
  }

  // 更新指定索引的分组值
  public updateSelectedGroupValue(event: Event, index: number) {
    const target = event.target as HTMLSelectElement;
    this.attrConfigList[index].groupTypeValue = target.value;
  }

  // 示例：批量构建所有配置的AllValues
  public buildAllValues() {
    this.attrConfigList.forEach(config => {
      this.allValues.buildFacet(config.attributeField, groupType.ALL_VALUES);
    })
  }

  // *ngFor的trackBy优化，避免数组变化时全量重渲染
  public trackByIndex(index: number, item: AttrConfig) {
    return index;
  }
}

第二步：修改HTML代码 #

把原有单组下拉的代码用*ngFor遍历配置数组，绑定对应索引的状态：

<h3>Attribute</h3>
<!-- 给新增按钮绑定点击事件 -->
<button (click)="addNewAttr()">Add new Attribute</button>

<!-- 遍历配置数组，渲染每一组下拉 -->
<ng-container *ngFor="let config of attrConfigList; let i = index; trackBy: trackByIndex">
  <select (change)="updateAttributeSelected($event, i)">
    <option *ngFor="let attribute of attributes" [value]="attribute" [selected]="attribute === config.attributeSelected">
      {{ attribute }}
    </option>
  </select>

  <div id="divider">
    <h3 id="groupValue">Select group value</h3>
    <select (change)="updateSelectedGroupValue($event, i)">
      <option *ngFor="let value of groupValues" [value]="value" [selected]="value === config.groupTypeValue">
        {{ value }}
      </option>
    </select>

    <div></div>

    <h3>Statement</h3>
    <input type="text" [value]="config.attributeField" />
  </div>
  <div>-------------</div>
</ng-container>

<div>
  Console Area
  <div></div>
</div>

额外说明 #

• 每个新增下拉组的状态完全独立，不会互相干扰
• 后续如果要提交所有配置，直接取attrConfigList数组即可，不需要单独收集每个控件的值
• 如果需要实现删除功能，只要给每个组加删除按钮，调用数组的splice(index, 1)方法即可

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