Angular 9 не может установить или снять флажок - PullRequest
Новая
       7

Angular 9 не может установить или снять флажок

0 голосов
/ 26 февраля 2020

У меня есть таблица, которая заполняется из массива из API. Следующее, что я хочу сделать, это добавить несколько флажков на вкладке рядом с таблицей для фильтрации данных в таблице. Я добавляю флажки динамически, потому что до тех пор, пока массив не поступит из API, я не знаю фильтры (я знаю категорию фильтров. ie Страна или язык, но я не знаю, какие страны или какие языки будут приходите в массив).

Итак, проблема в том, что я пытаюсь создать форму массива, содержащую флажки, и добавляю к ним программно, как только узнаю, какие будут значения для фильтров. Но, когда я пытаюсь щелкнуть (просто с помощью мыши) на сгенерированных флажках, я не могу. Он не проверяет и не снимает флажок.

Однако, если я просто добавлю флажки без formArray, я смогу отмечать и снимать флажок для содержимого моего сердца.

Вот мой html для того, когда я не может проверить или снять галочку (изначально все они проверены) 

<form [formGroup]="languageForm">
    <div *ngIf='results && results.length'>
        <div class=" custom-control custom-checkbox mb-3" *ngFor="let item of languageForm.controls.filters.controls; let i = index" formArrayName="filters">
            <input class=" custom-control-input" [formControlName]="i" id="i" type="checkbox" />

            <label class=" custom-control-label" [for]="i">
                {{ f_languages[i].label }}
            </label>
        </div>
    </div>
</form>

Вот html (для того, кто работает) 

<div *ngIf='results && results.length'>
    <div class=" custom-control custom-checkbox mb-3" *ngFor="let item of f_countries; let i = index">
        <input class=" custom-control-input" id="{{ item.value }}" type="checkbox" />

        <label class=" custom-control-label" for="{{ item.value }}">
            {{ item.value }}
        </label>
    </div>
</div>

Вот TS для обоих (ради примера я сделаю фильтры stati c) 

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.scss']
})
export class SearchComponent implements OnInit {
  f_countries = [
    {label: 'United States', value: 'US' },
    {label: 'United Kingdom', value: 'UK' },
    {label: 'Germany', value: 'DE' },
    {label: 'Philippines', value: 'PH' }
  ];

  f_languages = [
    {label: 'English', value: 'EN' },
    {label: 'German', value: 'DE' },
    {label: 'French', value: 'FR' },
    {label: 'Spanish', value: 'ES' }
  ];

//constructor omitted but nothing interesting there

ngOnInit() {
    // search form init and other things
    this.languagesForm = this.formBuilder.group({
      filters: new FormArray([])
    });
}

doSearch(): void {
    this.searchService.search(this.searchForm.get('country').value, this.searchForm.get('language').value)
        .subscribe(results => {
            this.results = results;
            this.slicedResults = this.results.slice(0, this.pageSize);

            //load the filters
            this.initializeFilters();
        });
}

initializeFilters(): void {
    //normally here the mapping from results to the filters 
    //but omitted since I said that for the example the filters are static

    this.f_languages.forEach((o, i) => {
      const control = new FormControl(true);
      (this.languagesForm.controls.filters as FormArray).push(control);
    });
  }

Заранее спасибо за помощь, я уверен, что это что-то глупое, что я просто больше не вижу после того, как смотрю на это на столько часов.

РЕДАКТИРОВАТЬ - Я не знаю точно, почему это сработало, но это сработало. Смотрите ниже мой последний html, который теперь таинственно кликабелен 

<form [formGroup]="languagesForm">
    <div *ngIf='results && results.length'>
        <div class=" custom-control custom-checkbox mb-3" *ngFor="let item of languagesForm.controls.filters.controls; let i = index" formArrayName="filters">
            <input checked="checked" class=" custom-control-input" id="{{ i }}" [formControlName]="i" [value]="f_languages[i].value" type="checkbox" />

            <label class=" custom-control-label" [for]="i">
                {{ f_languages[i].label }}
            </label>
        </div>
    </div>
</form>

Очевидно, что у него нет id на входе и для на ярлыке вещь не un / checkable. Может быть, кто-то сможет объяснить, почему ...

...