Когда я выбираю флажок в ряд.Он выбирает все флажки, доступные в угловой таблице 7?

Question

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

<thead>
<tr>
   <th scope="col">Attach</th>
   <th scope="col">Link</th>
</tr>
</thead>

<tbody>
    <tr *ngFor="let list of complianceReports.selectedData;let i = index">
        <td>
            <input id=" {{ i+1 }} " type="checkbox" name="attach[$index]" class="setup-checkbox" [(ngModel)]="complianceReports.attach[$index]">{{i+1}}
        </td>
        <td>
            <input id="complianceReports.link[$index]" type="checkbox" name="link[$index]" class="setup-checkbox" [(ngModel)]="complianceReports.link[$index]">
        </td>
    </tr>
</tbody>

Как установить флажок в строке в соответствии с необходимостью в угловых 7

Answer 1

Вам необходимо использовать i (index) instand $index при привязке к ngModel ??

<tr *ngFor="let list of complianceReports.selectedData;let i = index">
    <td>
        <input type="checkbox" class="setup-checkbox" [(ngModel)]="complianceReports.attach[i]">{{i+1}}
    </td>
    <td>
        <input  type="checkbox" class="setup-checkbox" [(ngModel)]="complianceReports.link[i]">
    </td>
</tr>

Answer 2

У вас проблемы с использованием переменных в свойстве тега с Angular. Ваша проблема исходит от name ваших входов. Они все одинаковые: строка attach[$index]. Вы должны использовать скобки вокруг name, чтобы сообщить Angular, что ему нужно интерполировать его значение.

<tbody>
    <tr *ngFor="let list of complianceReports.selectedData;let i = index">
        <td>
            <input [id]="i+1" type="checkbox" [name]="attach[$index]" class="setup-checkbox" [(ngModel)]="complianceReports.attach[$index]">{{i+1}}
        </td>
        <td>
            <input [id]="complianceReports.link[$index]" type="checkbox" [name]="link[$index]" class="setup-checkbox" [(ngModel)]="complianceReports.link[$index]">
        </td>
    </tr>
</tbody>