关于angular:angular-多选表单数据绑定

前言

对于一个多选类型，如何获取所有已抉择的数组。

尝试

获取 formControl 的 value。

this.formControl.valueChanges.subscribe(value => {console.log(value);
})

对于绑定多选类型的 formControl 的 value，只会有 true 或者 false。

如果你选中就是 true，如果不选中就是 false。然而我想要的是所有选中对象数组。
谷歌搜寻得悉，能够绑定点击事件，再去减少或删除数组中的对象。

<div *ngFor="let option of formItem.formItemOptions; index as i" class="form-check">
        <input  [formControl]="formControl" [value]="option.id"
                (click)="selectCheckBox(formControl.value, option)"
                 class="form-check-input"
                type="checkbox" >
        <label class="form-check-label mr-1" for="{{id}}_{{option.id}}">
          <span>{{option.content}}</span>
        </label>
      </div>

selectCheckBox(isCheck: boolean, option: FormItemOption): void {if (isCheck) {this.formItemValue.formItemOptions.push(option);
    } else {const index = this.formItemValue.formItemOptions.indexOf(option);
      this.formItemValue.formItemOptions.splice(index, 1);
    }
}

然而获取传入的 formControl.value 变量为 null，猜想可能先出发点击工夫，后进行表单数据绑定。
改写办法

selectCheckBox(isCheck: boolean, option: FormItemOption): void {
    // 如果 index 值为 -2，示意数组为定义，发明一个数组
    // 如果 index 值为 -1，示意所选选项并未处于数组内，增加之
    // 如果 index 值大于等于 0，口试所选选项处于数组内，删除之
    const index = Array.isArray(this.formItemValue.formItemOptions) ? this.formItemValue.formItemOptions.indexOf(option) : -2;
    if (index < -1) {this.formItemValue.formItemOptions = [option];
    } else if (index < 0) {this.formItemValue.formItemOptions.push(option);
    } else {this.formItemValue.formItemOptions.splice(index, 1);
    }
  }

测试

然而如果多选题自身就有对象数组，如何初始化。
想着用 input 标签的 checked="checked" 属性确定初始化选项，发现并未失效，去除 input 标签的 [formControl]="formControl" 后，就失效了，猜想可能两个属性抵触。

查看博客上实例，对于每一个选项绑定一个 formControl。定义一个 FormArray 整合所有 formControl。如果有须要能够尝试。
https://stackoverflow.com/questions/40927167/angular-reactiveforms-producing-an-array-of-checkbox-values/69637536#69637536