绑定单击并更改复选框angular2答案

【问题标题】：Bind click and change checkbox angular2绑定单击并更改复选框angular2
【发布时间】：2016-08-30 22:22:44
【问题描述】：

我对使用 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)] 但它不起作用。

谢谢！

【问题讨论】：

我刚刚将您的代码复制并粘贴到plunker，它工作正常。虽然我认为object 是保留字。
更正，我刚查过，object 不是保留字。只是感觉不对:)
嗨，对象名称只是一个符号名称，我已经用其他名称编辑了问题，并添加了“myObjects”变量的类型。谢谢！
名字不是问题，我弄错了。此外，您的代码运行良好。你检查了我提交的 plunker 吗？可能有一些其他代码您没有在您的问题中输入导致问题。
我找到了问题，但我的解决方案只是继续开发的一种解决方法。我必须使用 ngOnInit 方法将 myObject 输入复制到我的类中的私有属性中，例如：ngOnInit(){this.myPrivateMyObject=this.myObject} 并使用 myPrivateObject 而不是 myObject ，然后才能正常工作。我将阅读更多文档，但这是一个解决方案。非常感谢和问候！

标签： javascript checkbox angular

【解决方案1】：

你可以查看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>

【讨论】：

Garbzade 这也不适用于 angular 4 材料和原生 html 单选复选框。下面是我的代码 {{{{list.value}} {{list.value}}