Angular2 - серьезные проблемы с флажками

Question

Прежде всего, я просто очень разочарован тем, как недокументирован весь раздел флажка. Это вызывает у меня серьезные проблемы. Я хотел бы предоставить массив строк, которые пользователь может щелкнуть, и выбранные строки будут сохранены в свойстве. Если тогда пользователь решает ИЗМЕНИТЬ текущий элемент, он может снять и проверить некоторые другие значения и обновить значения в массиве. Звучит просто? Это кошмар.

Это то, что я придумал: https://plnkr.co/edit/FECAKFDRyMn8CyV4SpqD?p=preview

шаги заключаются в следующем: написать новое имя, выбрать английский и немецкий языки и нажмите кнопку «Добавить». Затем выберите «Джеймс» и снимите флажок «Английский» и нажмите «Обновить», и вы увидите, что все языки были удалены. Я понятия не имею, правильно ли я подходит к этой проблеме флажков, там просто нет документации.

Код:

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

мне удалось решить проблему, подходя немного по-другому. В любом случае, спасибо за ваш вклад.

Пример 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

Answer 2

У вас есть 2 основные проблемы с кодом:

Первое - вы должны создать копию каждый раз, когда вы создаете новый элемент (вместо того, чтобы просто ссылаться на все ваши предметы на один объект в памяти). Так что в вашем методе AddNew используйте

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

Второй - это строка:

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

это неправильно, потому что this.languages содержит только метки (без выбранного свойства), и именно поэтому вы сброс выбранных языков при редактировании

Answer 3

После отладки кода я обнаружил, что основная проблема заключается в том, что вы используете значения флажка как часть вашего объекта person (вы копируете ссылку на person.speaking).

Вы можете увидеть это в функции AddNew:

• Добавить «Вилли», как человека со всеми языками выбранных
• Добавить «Wonkers» как человек только с одним выбранным языком
• Проверьте лицо. говорящий массив «Вилли»: выбран только язык «Вонкеров».

При создании нового человека вы копируете ссылки выбранных значений с помощью фильтра, но вам нужно клонировать объекты.

(я не уверен, что нет JS Wizzard, но это исправили проблему на оных :)

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('', []); 
    }