通过方法取消选中for循环中的复选框

Question

我在for循环中有一个复选框，并有一个数组来存储行的详细信息。我一次只想选中两个复选框。当用户点击第三个复选框时，在向烤面包机发送消息时，复选框应该自动取消选中。

我已经尝试过实现这一点，并且正在成功地获得烤面包机的消息。但第三个复选框不会自动取消选中。请帮忙。

HTML

<tr *ngFor="let row of rows$; let indexOfEl = index">
<td><input type="checkbox" value="indexOfEl (change)="onCheckboxChange($event,indexOfEl,row)"/></td>
</tr>

TS文件

onCheckboxChange(event: any, index:any, data: any){
if(event?.target?.checked){
if(this.selectedCommand.length < 2){
data.index = index;
this.selectedCommand.push(data);
}
else {
this.sharedService.showErrorNotification('Cannot select more than two commands', 'Error');
}
}
else this.selectedCommand = this.arrayRemove(this.selectedCommand,index);}
arrayRemove(array:any , index:any){
return array.filter(function(element){
return element.index != index;
});

}

Answer 1

我已经很快写下了我将如何做到这一点。如果有帮助，请随意使用。

HTML

<tr *ngFor="let command of commands">
<td>
<input
type="checkbox"
(change)="onCheckboxChange($event, command)"
/>
</td>
</tr>

TS

export class YourComponent {
public selectedCommand: Command[] = [];
public commands: Command[] = [
{ commandName: 'Command 1' },
{ commandName: 'Command 2' },
{ commandName: 'Command 3' },
{ commandName: 'Command 4' },
{ commandName: 'Command 5' }
];
constructor() { } 
public onCheckboxChange(event: any, data: Command) {
if (event?.target?.checked) {
if (this.selectedCommand.length < 2) {
this.selectedCommand.push(data);
}
else {
this.sharedService.showErrorNotification('Cannot select more than two commands', 'Error');
event.target.checked = false;
}
}
else {
var indexToRemove = this.selectedCommand.findIndex(x => x.commandName == data.commandName);
this.selectedCommand.splice(indexToRemove, 1);
}
}
}
interface Command {
commandName: string;
}