Angular bootstrap выпадающие элементы формы, не загружаемые в один клик - PullRequest
Новая
       6

Angular bootstrap выпадающие элементы формы, не загружаемые в один клик

0 голосов
/ 28 января 2020

Я пытаюсь создать раскрывающийся список с несколькими флажками. флажки отображаются, но все метки отображаются, если нажать несколько раз на кнопку раскрывающегося списка.

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>

Initially load after two clicks After multile clicks dropdown works as expected

1 Ответ

0 голосов
/ 28 января 2020

FormArray основаны на индексе, измените [formControlName] = "option" на [formControlName] = "index"

компонент. 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>
...