打字稿：遍历复选框（由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 和 Name - 就像：

当名字 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