打字稿：遍历复选框（由ngfor制造）并打印每个复选框的值

Question

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

这是代码：

<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