Question

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

这就是我提出的：https://plnkr.co/edit/FECAKFDRyMn8CyV4SpqD?p=preview

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

代码：

    import { Component } from '@angular/core';

const LANG: any[] = [
  {label: 'English'},
  {label: 'German'},
  {label: 'Italian'}
]

class Person {
  constructor(public name:string; public speaking: string[]) {}
}

@Component({
  selector: 'app-root',
  templateUrl: './src/app/app.component.html',
  styleUrls: ['./src/app/app.component.css']
})
export class AppComponent {
  title = 'app works!';
  people: Person[];
  person: Person = new Person('', []);
  languages: string[] = LANG;

  constructor() {
    let person1 = new Person('James', [Object.assign({}, LANG[0]), Object.assign({}, LANG[2])]);  
    let person2 = new Person('Frank', [Object.assign({}, LANG[1]));  
    this.people = [person1, person2];
  }

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

  Reset(): void {
    this.person = new Person('', []);
  }

  Update(): void {
    this.person.speaking = this.languages.filter(x => x.selected === true);
  }

  Edit(name: string): void {
    this.person = this.people.find(x => x.name === name);
  }

  checkCondition(current: any): boolean {
    return (this.person.speaking.find((x: any) => x.label === current.label) !== undefined);
  }  

}

HTML：

    <h1>{{title}}</h1>
<form #form>
  <input type="text" [(ngModel)]="person.name" name="name" placeholder="insert name" />
  <br />
  <br />
  <label>Languages:</label>
  <ul>
    <li *ngFor="let language of languages">
      <label>
        <input type="checkbox" [(ngModel)]="language.selected" name="languages" [checked]="checkCondition(language)" />{{language.label}}
      </label>        
    </li>
    {{languages |json}}
  </ul>
  <br /><br />
  <button (click)="Update()">Update</button> | 
  <button (click)="AddNew(); form.reset()">Add new</button> |
  <button (click)="Reset(); form.reset()">Reset form</button>
</form>

<hr />

<ul>
  <li *ngFor="let one of people">
    {{one.name}}, speaking: {{one.speaking | json}} | <a href="#" (click)="Edit(one.name)">Edit</a>
  </li>
</ul>

Answer 1

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

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

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

第二 - 这一行：

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

错误，因为this.languages仅包含标签（没有选定的属性），这就是您在编辑时重置所选语言的原因

Answer 2

在调试代码后，我发现主要问题是，您使用复选框值作为person对象的一部分（复制对person.speaking的引用）。

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

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

创建新人时，使用过滤器复制所选值的引用，但您需要克隆对象。

（我确定没有JS wizzard，但这解决了添加问题：）

{{1}}

Answer 3

我设法通过接近一点点来解决问题。无论如何，谢谢您的意见。

示例HTML代码：

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

可以在此处找到解决方案：https://plnkr.co/edit/OXXbt8jxZHzjB3jVYC0o?p=preview

Angular2 - 复选框

3 个答案: