绑定单击并更改复选框角度2

Bind click and change checkbox angular2

本文关键字：复选框 单击 绑定      更新时间：2023-09-26

我在使用angular2（beta 17）的复选框方面遇到了一个奇怪的问题。

我试图在元素具有数组时设置相同的复选框，并绑定更改或单击事件。

例如，我有一个数组：

myObjects=[
    {value:true},
    {value:true},
    {value:false},
    {value:true}
];

我正在使用ngFor创建所有复选框：

<div *ngFor="let myObject of myObjects; let i = index" >
    <input 
            type="checkbox" 
            [checked]="myObject.value" 
            (change)="updateCheckedOptions(i, $event)"
    />
</div>

最后，我的组件中有一个函数：

@Input() myObjects;
updateCheckedOptions(index,event){
    this.myObjects[index].value=event.target.checked;
}

但问题是复选框不会更改，我的意思是，当我单击复选框时，如果初始状态为选中状态，则始终保持选中状态，反之亦然。

我尝试过使用（click）、（change）、[（ngModel）]，但都不起作用。

谢谢！

您可以检查ngModelChange:

//This is your component
@Input() myObjects;
myObjects=[
    {value:true},
    {value:true},
    {value:false},
    {value:true}
];
updateCheckedOptions(index,event){
    this.myObjects[index].value=event.target.checked;
    console.log(index + " ---- " + event);
}
<div *ngFor="let myObject of myObjects; let i = index" >
    <input 
            type="checkbox" 
            [checked]="myObject.value" 
            (ngModelChange)="updateCheckedOptions(i, $event)"
    />
</div>

相关文章：