Angular 2 Satz und binden Kontrollkästchen mit einem ngFor

Question

Ich habe ein Array wie folgt aus:

objectArray = [ 
     {"name": "Car"}, 
     {"name": "Bike"}, 
     {"name": "Boat"}, 
     {"name": "Plane"} 
    ]; 

Und die Vorlage wie folgt aus:

<li *ngFor="#obj of objectArray"> 
    <a href="#" class="small" data-value="option1" tabIndex="-1"> 
     <input type="checkbox" (change)="expression && expression.value = $event.target.checked ? true : undefind" [ngModel]="expression?.value"> 
     <label for="">{{ obj.name }}</label> 
    </a> 
</li> 

Aber dies wird der Fall, wenn ein Kontrollkästchen aktiviert ist. Wie stelle ich das getrennt ein?

Answer 1

ich das denke, was Sie wollen:

<li *ngFor="let obj of objectArray"> 
    <a href="#" class="small" data-value="option1" tabIndex="-1"> 
<input type="checkbox" 
    (change)="expression && expression[obj.name]=$event.target.checked ? true : undefined" 
    [ngModel]="expression && expression[obj.name]"> 
    </a> 
</li> 

Update Mit (ngModelChange) ist in der Regel besser als (change) vor allem, wenn [ngModel]

verwendet wird

<input type="checkbox" 
    (ngModelChange)="expression && expression[obj.name]= $event ? true : undefined" 
    [ngModel]="expression && expression[obj.name]"> 

Answer 2

ich einige Mühe hatte dies herauszufinden, mit die neueste Version von Angular 2. Hier ist, was ich kam, um Zwei-Wege-Bindung zu einer Liste von Objekten, die einen Rollennamen und bool enthalten Ean für wenn die Rolle überprüft wird.

<form [formGroup]="userInfoForm" (ngSubmit)="onSubmit(userInfoForm)"> 

...

<input type="hidden" name="roles" formControlName="roles" [(ngModel)]="roleSelections"> 
<div *ngFor="let role of roleSelections"> 
    <input type="checkbox" [value]="role.isChecked" [checked]="role.isChecked" (change)="$event.target.checked ? role.isChecked = true : role.isChecked = false"> {{role.name}} 
</div> 

RoleSelection ist nur eine einfache Klasse mit zwei Feldern:

export class RoleSelection { 
constructor(
    public name: string, 
    public isChecked: boolean) 
    { } 
} 

Und in der Komponente hatte ich eine Eigenschaft zu erklären genannt Rollen, wenn Sie eine FormGroup erstellen, und binden Sie diese anschließend an das ausgeblendete Feld im obigen HTML.

this.userInfoForm = new FormGroup({ 
     emailAddress: new FormControl(this.userInfo.emailAddress, Validators.required), 
     firstName: new FormControl(this.userInfo.firstName, Validators.required), 
     middleName: new FormControl(this.userInfo.middleName), 
     lastName: new FormControl(this.userInfo.lastName, Validators.required), 
     isAdmin: new FormControl(this.userInfo.isAdmin), 
     isArchived: new FormControl(this.userInfo.isArchived), 
     roles: new FormControl(this.roleSelections) 
    }); 

Dann nach Vorlage der Form hat die ngSubmit Methode nur herausziehen, was er braucht:

private onSubmit(obj: any) { 
    if (obj.valid) { 
     let account: IUserAccount = {}; 
     account.id = this.userAccountId; 
     account.firstName = obj.controls.firstName.value; 
     ... 
     ... 
     // get list of roles checked via obj.controls.roles.value[i].isChecked etc 
     ... 
     ... 
     // do submission 
    } 
}