Блог

У меня очень странная проблема. У меня в шаблоне есть следующая итерация:

 lt;div class="wrapper"gt;  lt;app-group-selector  (selectedValuesChanged)="updateSelectedGroups(group.name, $event)"  *ngFor="let group of groups"  [allValues]="group.allValues"  [selectedValues]="group.selectedValues"  class="chart-control-groups-item"  label="{{ group.name }}"  gt;lt;/app-group-selectorgt; lt;/divgt;  

внутри app-group-selector у меня есть этот шаблон:

 lt;div class="result-area" [hidden]="!isResultSelectionListOpen"gt;  lt;div class="select-all-selector"gt;  lt;app-checkbox [inputId]="'select-all'" [(ngModel)]="selectAllItemsCheckbox" [compact]="true" (change)="handleSelectAllCheckbox()"gt;lt;/app-checkboxgt;  lt;label [for]="'select-all'" class="result-label"gt;Select Alllt;/labelgt;  lt;/divgt;  lt;ul class="result-selection-list"gt;  lt;li *ngFor="let item of allSelectionItems" class="result-item"gt;  lt;app-checkbox [inputId]="item.key" [compact]="true" [(ngModel)]="item.checked" (change)="handleCheckItem()"gt;lt;/app-checkboxgt;  lt;label [for]="item.key" class="result-label"gt;{{ item.key }}lt;/labelgt;  lt;/ligt;  lt;/ulgt; lt;/divgt;  

и в .ts файле у меня есть метод:

 handleSelectAllCheckbox(): void {  console.log('all items: '   this.allSelectionItems); }  

Теперь в пользовательском интерфейсе у меня есть 3 app-group-selector компонента. Странная вещь заключается в том, что, когда я нажимаю на флажок «Выбрать все» последнего компонента, он запускает handleSelectAllCheckbox() метод первого компонента (я вижу это, потому что консоль.журнал показывает мне неправильный allSelectionItems список.

Теперь между этими компонентами вообще не должно быть никакой связи — они должны жить для себя.

Компонент объявлен в массиве app.module объявлений, как обычно.

Кто-нибудь, пожалуйста, может мне помочь?

[inputId]="'select-all'" является ли здесь виновником. На итерации в одном id документе будет несколько одинаковых элементов, все for="select-all" они всегда будут ссылаться на первый элемент с этим идентификатором.

Теперь, когда вы знаете решение, вам придется использовать динамические значения для id и for , как вы сделали ниже [inputId]="item.key" , и [for]="item.key" .