Angular 4 захватывает значение тумблерного переключателя (вкл / выкл), используя [(ngModel)] для n количества строк

Question

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

checked: boolean,checkedLabel:string,disabled:boolean,name:string, and toggleSwitch:event emitter.

 <ng-container *ngFor="let data of displayData$ | async;let i = index">
                    <tr class= "row-break">

                        <td>  
                             <a>{{data.value1}}</a>
                        </td>
                        <td>
                            {{data.value2}}
                        </td>
                        <cm-toggle-switch [(ngModel)]="formModel.state[i]" toggleSwitchChange="toggle($event)" [checked]="true" ></cm-toggle-switch>
                    </tr>
                </ng-container>

Answer 1

Посмотрите на Демо:

StackBlitz

демонстрация

Объяснение:

Просто используйте ngModel, не нужно ни прослушивателя событий, ни проверенного свойства

<tr *ngFor="let row of rows; let i = index">
    <td>{{i + 1}}</td>
    <td><input type="checkbox" [(ngModel)]="row.selected"></td>
</tr>