Angular开发中点击checkbox如何拆分后端参数生成带标签文本框

1. 调整TS逻辑 #

首先修改changeSelection方法，除了筛选选中项，还要给每个选中的product预处理template_parameter字段，拆分出参数列表，同时初始化对应的参数值存储对象，方便后续读取输入框的提交值。

// 新增存储对象，用来保存所有选中产品的参数输入值，键为产品唯一标识（如id），值为参数键值对
productParamMap: Record<number | string, Record<string, string>> = {};

changeSelection(event: any, product: any) {
  if (product.isChecked) {
    // 按逗号拆分后端返回的参数字符串为数组
    product.paramList = product.template_parameter.split(',');
    // 初始化当前产品的参数存储容器
    this.productParamMap[product.id] = {};
    product.paramList.forEach(param => {
      this.productParamMap[product.id][param] = '';
    });
  } else {
    // 取消勾选时清除对应存储的参数
    delete this.productParamMap[product.id];
  }
  // 刷新选中列表
  this.selectedItemsList = this.DisplayProductList.filter(item => item.isChecked);
}

2. 调整HTML模板 #

在原有checkbox容器后新增参数输入区域，仅当checkbox勾选时显示，遍历拆分后的参数数组生成「标签+文本框」组合：

<div class="form-check" *ngFor="let product of DisplayProductList">
  <label class="form-check-label text-break">
    <input class="form-check-input" type="checkbox" formControlName="templateparameter" [value]="true"
    [(ngModel)]="product.isChecked" (change)="changeSelection($event, product)"> {{ product.template_name }}
    <span class="form-check-sign">
      <span class="check"></span>
    </span>
  </label>
  <!-- 新增参数输入区域 -->
  <div class="param-group" *ngIf="product.isChecked && product.paramList" style="margin-left: 24px; margin-top: 8px;">
    <div class="param-item" *ngFor="let param of product.paramList" style="margin-bottom: 8px;">
      <label style="display: block; margin-bottom: 4px;">{{param}}</label>
      <input type="text" class="form-control" [(ngModel)]="productParamMap[product.id][param]" placeholder="请输入{{param}}">
    </div>
  </div>
</div>

注意事项 #

• 如果product没有唯一id，可以用template_name或者循环索引index代替作为productParamMap的键，保证唯一性即可
• 后续提交表单时，直接读取productParamMap内的对应值即可，数据结构为{产品标识: {参数1: 输入值1, 参数2: 输入值2}}
• 如果你使用的是响应式表单，也可以把参数输入框动态加入到FormGroup中，逻辑和上述方案一致，仅需把ngModel替换为动态生成的formControlName即可

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