Angular动态生成下拉框选项的实现方案求助

问题核心 #

你拆分的splitValues是局部变量，没有挂载到字段对象上，导致模板无法访问到这些选项值。同时原HTML代码缺少对字段列表的遍历，也没有生成下拉框选项的逻辑。

1. 修改TS代码 #

将拆分后的选项值存入字段对象的属性中，同时处理空值避免报错：

this.fieldsData.forEach((ele, i) => {
  // 统一处理显示名称
  ele.DisplayName = ele?.labelName.replace(/###/g, ' '); 
  
  if(ele?.inputType === 'dropdown') {
    // 处理inputValues为空或null的情况，防止split报错
    const inputValues = ele?.inputValues || '';
    // 拆分后去除选项前后空格，存入字段对象的dropdownOptions属性
    ele.dropdownOptions = inputValues.split(',').map(val => val.trim());
  }
  
  // 统一初始化表单控件
  form[ele.labelName] = new FormControl('', ele.mandatory === 'yes' ? Validators.required : []);
});

2. 修改HTML代码 #

遍历字段列表，根据字段类型渲染控件，同时遍历下拉框选项生成<option>：

<form [formGroup]="FormGroup" *ngIf="fieldsData?.length > 0">
  <!-- 遍历所有字段 -->
  <ng-container *ngFor="let data of fieldsData">
    <!-- 下拉框控件 -->
    <ng-container *ngIf="data.inputType === 'dropdown'">
      <label>{{data.DisplayName}}</label>
      <select name="{{data.labelName}}" class="form-control" formControlName="{{data.labelName}}">
        <option value="">Select</option>
        <!-- 遍历拆分后的选项生成下拉选项 -->
        <option *ngFor="let option of data.dropdownOptions" [value]="option">{{option}}</option>
      </select>
    </ng-container>

    <!-- 文本框控件 -->
    <ng-container *ngIf="data.inputType === 'textbox'">
      <label>{{data.DisplayName}}</label>
      <input type="text" class="form-control" formControlName="{{data.labelName}}">
    </ng-container>

    <!-- 文本域控件 -->
    <ng-container *ngIf="data.inputType === 'textarea'">
      <label>{{data.DisplayName}}</label>
      <textarea class="form-control" formControlName="{{data.labelName}}"></textarea>
    </ng-container>
  </ng-container>
</form>

关键说明 #

• 将拆分后的选项存入ele.dropdownOptions，让模板可以直接访问
• 用map(val => val.trim())去除选项前后的空格，避免无效空格干扰
• 通过*ngFor="let data of fieldsData"遍历所有字段，实现动态渲染不同类型的控件

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