Typescript:遍历复选框(由ngfor制作)并打印每个复选框的值

Question

我想从ngfor生成的每个复选框中获取值(console.log(somevalue))。我的表单显示正常。

下面是代码：

<form>
  <div class="form-group row" *ngFor="let firstColumn of mapMenusFirstColumn; index as i;">
    <label class="col-4">{{firstColumn}}</label>
    <div class="col-8">
      <div class="custom-control custom-checkbox custom-control-inline"
        *ngFor="let secondColumn of this.getSecondColumn(this.mapMenu,firstColumn); index as j;">
        
        <input name="checkbox{{i}}" id="checkbox{{i+'_'+j}}" type="checkbox" class="custom-control-input"
          value={{secondColumn}}>
        <label for="checkbox{{i+'_'+j}}" class="custom-control-label">{{secondColumn}}</label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="offset-4 col-8">
      <button name="submit" type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

以下是设计：

​

​

我需要遍历所有的复选框并对每个复选框值执行console.log()。请帮帮我

(请注意:查看我是如何生成Id和名称的-它类似于：

当名称%1 id为1_1时，1_2 ..

当名称2 id为2_1，2_2，2_3，...

我应该为此改变我的id，name实现吗？如果有，请告诉我。)

Answer 1

一种可能的解决方案是使用反应式形式。首先，根据数组中的第一列和第二列在组件中创建一个FormGroup，如下所示：

 buildReactiveForm() {
    this.form = new FormGroup({});
    this.mapMenusFirstColumn.forEach((firstColumnItem, firstIndex) => {
      this.getSecondColumn(this.mapMenu, firstColumnItem).forEach(
        (secondColumnItem, secondIndex) => {
          this.form.addControl(
            "checkbox" + firstIndex + "_" + secondIndex,
            new FormControl(false)
          );
        }
      );
    });
  }

在HTML文件中，为指定表单控件名称的标记添加另一个属性

<input name="checkbox{{i}}" id="checkbox{{i+'_'+j}}" formControlName="checkbox{{i+'_'+j}}" type="checkbox" class="custom-control-input">

最后，您可以通过记录表单的值来记录复选框的值

console.log(this.form.value)

，它将具有以下输出

​

Stackblitz：https://stackblitz.com/edit/questions63098875?file=src/app/app.component.ts