复选框ngFor Angular2上的双向绑定

Posted 2023-02-22

【中文标题】复选框ngFor Angular2上的双向绑定

【英文标题】：two-way binding on checkbox ngFor Angular2

【发布时间】：2017-11-07 08:50:15

【问题描述】：

我正在创建一个 Angular2 项目，但遇到复选框的双向绑定问题。

我有一个名为 listItem 和 List 的类：

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 搜索中调用该列表，该列表运行正常。 问题是当我将值设置为复选框时。

<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 的值也总是假的。我尝试使用 [(ngModel)] 但也没有工作。 我也试着做一个函数：

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

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

但我收到了这个错误：

无法分配给对象“[对象”的只读属性“已检查” 对象]'

为什么会这样以及如何解决？谢谢

【问题讨论】：

可能重复。您能否详细说明 [(ngModel)] 在您的案例中的表现？它应该可以正常工作。 ***.com/questions/40214655/…

我这样添加它：[(ngModel)]="item.checked" 我总是错误的。没有任何错误。

意思是即使你选中了复选框，它仍然是假的？

我试过这个例子，但也没有用。为什么我在尝试进行活动时会收到错误消息？

是的，最后的'checked'值默认为false。所以无论我检查多少。当我检查调试器并在一个按钮后单击所有复选框返回 false 时，该列表仍然为 false，这是默认设置。我认为绑定的一种方式效果很好，但值的集合不起作用。也许错误消息可能是原因。但我不明白，也不知道为什么。

【参考方案1】：

您可以使用 material2 md-checkbox 指令来创建样式元素。 在我看来，这并不是真正的双向绑定，它只是双向绑定的一种组合（模板 - 数据源和数据源 - 模板）

更新： 我创建了一个小 plnkr 来重现您的情况：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;
  

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

更新：重构 plnkr

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

我对您发送给我的 plnkr 做了一些更改。

我将迭代变量从 const 更改为 let（考虑到它们的值在循环执行期间不是常量）。

正如我之前提到的，很可能有两种可能性：.ts 中的类以错误的方式转换为 .js（类成员默认设置为只读），或者方式有问题您正在手动将值映射到类实例。

【讨论】：

我不允许添加任何额外的库

感谢您的解决方案，我试过了，但没有奏效。同样的问题。请查看问题中提到的错误消息。

我没有看到在 plnkr 上触发的错误消息。你有我可以使用的小测试集吗？这个错误很奇怪，考虑到属性 checkd 没有定义为只读或类似

我猜问题出在套装上。因为当我尝试实现问题中提到的事件时，我收到错误：无法分配给对象'[object Object]'的只读属性'checked'但为什么？

由于某种原因，数组中的对象被写保护。您从哪里生成/获取此集合？