Javascript Angular2-复选框存在严重问题

首先，我真的很失望整个复选框部分都没有文档记录。这给我带来了一些严重的问题。我想提供一个字符串数组，用户可以单击该数组并将所选字符串存储到属性中。如果用户决定编辑当前项，他可以取消选中并检查一些其他值，并更新数组中的值。听起来很简单？这是一场噩梦

这就是我想到的：

步骤如下：输入新名称，选择英语和德语，然后按“添加新名称”。然后选择“James”并取消选择“English”，然后按“Update”，您将看到所有语言都已被删除。我不知道我是否正确处理了这个复选框问题，只是没有任何文档

代码：

HTML:

{{title}




语言：


{{language.label}

{{语言| json}




更新|
新增|
重置表单



{{one.name}}，说：{{one.speaking | json}}}

您的代码有两个主要问题：

首先-每次创建新项时都必须创建一个副本（而不是将所有项引用到内存中的一个对象）。因此，在您的

AddNew

方法中，请使用

this.people.push(Object.assign(new Person(), this.person));

第二，这一行：

this.languages.filter(x => x.selected === true);

---

这是错误的，因为

此.languages

仅包含标签（不包含选定属性），这就是为什么您在编辑时重置选定语言的原因调试代码后，我发现主要问题是，您将复选框值用作person对象的一部分（您复制了对“正在讲话的人”的引用）

您可以在AddNew函数中看到这一点：

• 将“Willy”添加为选择了所有语言的人
• 将“Wonkers”添加为只选择一种语言的人
• 检查“Willy”的person.speaking数组：仅选择“Wonkers”的语言

创建新人员时，可以使用筛选器复制选定值的引用，但需要克隆对象

（我确信没有JS wizzard，但这解决了add:上的问题）

---

我设法解决了这个问题，方法有点不同。谢谢你的意见

示例HTML代码：

<li *ngFor="let language of languages">
  <label>
    <input type="checkbox"
      [checked]="checkCondition(language.label)"
      (change)="updateCheckedOptions(language, $event)" />
      {{language.label}}
  </label>        
</li>

{{language.label}

---

可以在这里找到解决方案：

thx用于提供功能调试示例！在调试中，语言检查是在

selected

字段上进行的，而您可以在下面阅读原始

Person

对象是在没有该字段的情况下创建的。好吧，我一直在使用该plunker，这里的主要问题是表单。reset（）。事实上，他将它们放入数组中，这是正确的，但他没有很好地管理显示对象与项目的链接方式。在我看来，应该是一个实际显示的示例副本，感谢你们两位的反馈。您能否提供一个如何解决语言编辑问题的提示？首先-语言类型ld是一个对象-也许你打算为此创建一个自定义类？我需要一个类来使用复选框吗？似乎有点bloated@uglycode不，您必须重新考虑您的方法，

selected

字段显然属于界面、表单，而不是您想要的

Person

对象。您可以使用m对象，并将属性复制到您的

人员

对象，例如编辑对象

this.languages.filter(x => x.selected === true);

  AddNew(): void {
    this.person.speaking = this.languages
                               .map(x =>  (x.selected===true)
                                             ? {label:x.label, selected:x.selected}
                                             : undefined)
                               .filter(x => x!==undefined);
    this.people.push(this.person);
    this.person = new Person('', []);
  }

<li *ngFor="let language of languages">
  <label>
    <input type="checkbox"
      [checked]="checkCondition(language.label)"
      (change)="updateCheckedOptions(language, $event)" />
      {{language.label}}
  </label>        
</li>