Angular Bootstrap DropDown 反应式表单项未加载

Question

我正在尝试创建一个包含多个复选框的下拉菜单。显示复选框，但通过多次单击下拉按钮显示所有标签。

Component.ts :

export class NgbdDropdownBasic implements OnInit {
  options = ["Hello", "World", "How", "Are", "You", "Doing"];
  selectForm: any;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.selectForm = new FormGroup({
      selects: new FormArray([])
    });
    for (const option of this.options) {
      this.selectForm.controls.selects.push(new FormControl(option));
    }
  }
}

component.html:

<div class="row">
<div class="col">
    <div ngbDropdown class="d-inline-block" [formGroup]="selectForm">
        <button class="btn btn-info" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
        <div ngbDropdownMenu aria-labelledby="dropdownBasic1" formArrayName="selects">
            <div class="form-group mr-auto border-bottom"
                *ngFor="let option of selectForm.controls.selects.controls; index as index">
                <input type="checkbox" class="form-check-check" [id]="index" [formControlName]="option">
                <label class="form-check-label" for="{{ index }}" >
        {{ option.value }}
      </label>
            </div>
        </div>
    </div>
</div>

Answer 1

FormArray 是基于索引的，将 [formControlName]="option" 更改为 [formControlName]="index"。

component.html

    <div class="row">
      <div class="col">
        <div ngbDropdown class="d-inline-block" [formGroup]="selectForm">
          <button class="btn btn-info" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
          <div ngbDropdownMenu aria-labelledby="dropdownBasic1" formArrayName="selects">
            <div class="form-group mr-auto border-bottom"
              *ngFor="let option of selectForm.controls.selects.controls; index as index">
              <input type="checkbox" class="form-check-check" [id]="index" [formControlName]="index">
              <label class="form-check-label" for="{{ index }}">
                {{index}}
                {{ options[index] }}
              </label>
            </div>
          </div>
        </div>
      </div>

Angular Bootstrap DropDown 反应式表单项未加载

Angular Bootstrap DropDown reactive form items not loading

typescript

ng-bootstrap

angular

angular-reactive-forms