复选框ngFor Angular2上的双向绑定 [英] two-way binding on checkbox ngFor Angular2

问题描述

我正在创建Angular2项目，并且复选框的双向绑定存在问题.

I am creating an Angular2 project and having a problem with two-way binding for a checkbox.

我有一个名为listItem和List的类，即

I have a class called listItem and List like that:

export class ListItem {
  public count: number;
  public value: string;
  public checked: boolean;

  constructor(count: number, value: string, checked: boolean) {
    this.count = count;
    this.value = value;
    this.checked = checked;
  }
}

export class MyList{
  public category: string;
  public listItem : ListItem [];

  constructor(category: string, listItem : ListItem []) {
    this.category = category;
    this.listItem = listItem ;
  }
}

，并且正在正常运行的Azure搜索中调用列表. 问题是当我只是将值设置为复选框时.

and I am calling the list from Azure search which is working correctly. the problem is when I just set the value to a checkbox.

<div *ngFor="let list of myList; let listIndex = index;">
  <div *ngFor="let item of list.listItems; let itemIndex = index;">
    <input type="checkbox" [name]="list.category + item.value"
         (change)="item.checked = !item.checked"
         [ngModel]="item.checked" />
  </div
</div>

，但onClick的值始终为false.我尝试使用[(ngModel)]，但也无法正常工作. 我也尝试做一个函数:

but the value is always false also onClick. I tried to use [(ngModel)] but did not work also. I also tried to make a function:

(change)="oncheck(listIndex, itemIndex)"

oncheck(listIndex: number, itemIndex: number) {
   this.myList[listIndex].listItems[itemIndex].checked =  
           !this.myList[listIndex].listItems[itemIndex].checked;
  } 

但我收到此错误:

无法分配给对象'[object]的只读属性'checked' 对象]'

Cannot assign to read-only property 'checked' of object '[object Object]'

这是为什么以及如何解决?谢谢

why is that and how to fix it? thank you

推荐答案

您可以使用material2 md-checkbox指令创建样式化的元素. 我认为这并不是真正的双向绑定，它只是双向双向绑定(模板-数据源和数据源-模板)的组合

You could use the material2 md-checkbox directive to create styled elements. In my opinion that is not really two-way binding, its just a combination of 1 way binding in both directions (template - data source and data source - template)

更新: 我创建了一个小的plnkr来重现您的情况: http://plnkr.co/edit/cr7TokiqSaBGli7mgCBM

UPDATE: I created a small plnkr to reproduce your situation: http://plnkr.co/edit/cr7TokiqSaBGli7mgCBM

@Component({
  selector: 'my-app',
  template: `
    <div *ngFor="let element of elements; let i = index;">
    <span>Val: {{element}}</span>
      <input type="checkbox"
       [checked]="element" (change)="handleChange(element, i)">
    </div>
  `,
})
export class App {
  elements= [
    false,
    true,
    false,
  ]:

  handleChange(val: boolean, index: number){
    console.log("Index: "+index);
    console.log("Val:  "+val);
    this.elements[index] = !val;
  }

列表中的元素已正确呈现，但更改事件在某些情况下将修改elements数组中不正确位置的值.以后再看一眼

The elements in the list are correctly rendered, but the change events will in some cases modify the values of incorrect positions in the elements array. Ill take a furhter look later

更新:重构的plnkr

UPDATE: refactored plnkr

请检查: http://plnkr.co/edit/Ich0g5kzSiQINZjh3VYo

我对您发送给我的plnkr进行了一些更改.

I made some changes to the plnkr that u sent me.

我将迭代变量从const更改为let(考虑到它们的值在循环执行期间不变).

I changed the iteration variables from const to let (considering that their values arent constant during execution of the loops).

正如我之前提到的，很可能有两种可能性:.ts中的类被错误地编译为.js(默认情况下，类成员被设置为只读)，或者方式有问题您正在手动将值映射到类实例.

As I mentioned before, most likely there are 2 posibilities: the classes in .ts are being transpiled in a wrong way to .js (class members are being setted as readonly by default), or there is something wrong in the way that you are manually mapping the values to class instances.

这篇关于复选框ngFor Angular2上的双向绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！