Checkboxen in Angular2 aktivieren

Question

Ich benutze RC7. Ich möchte einige Kontrollkästchen vorbelegen, kann aber keine Antwort finden, die für mich funktioniert.

im Grunde habe ich diese

ngOnInit() { 
    this.price = [true, true, false]; 
    } 

und haben versucht, ngModel und checked zu verwenden, um auf 2 der 3 Kontrollkästchen drehen

<label *ngFor="let val of prices; let i = index" class="radio-inline"> 
    {{val.name}} 
    <input type="checkbox" [(ngModel)]="price[i]" [checked]="price[i]" name="price"> 
</label> 

Aber keines der Kontrollkästchen werden am Ende des Bootstrapping geprüft . Wenn ich auf sie klicke, sind die korrekten Werte in this.price in der Komponente verfügbar.

Update: Ebenso

<input type="checkbox" [(ngModel)]="price[i]" [value]="price[i]" name="price"> 

funktioniert nicht.

Antwort Ich habe das beste Ergebnis unter den beiden Antworten Kombination von ngModel verwenden, aber mit dem Booleschen Wert im iterable gespeichert.

<label *ngFor="let val of prices" class="radio-inline"> 
    {{val.name}} 
    <input type="checkbox" [(ngModel)]="val.state" name="price" /> 
</label> 

Answer 1

unter Versuchen,

@Component({ 
    selector: 'my-app', 
    template: `<h1>My First Angular 2 App</h1> 
    <label *ngFor="let val of prices; let i = index" class="radio-inline"> 
    {{val.name}} 
    <input type="checkbox" [checked]="val" name="price"> 
</label> 
    ` 
}) 
export class AppComponent { 
    prices=[]; 
    ngOnInit() { 
    this.prices = [true, true, false]; 
    } 
} 

Hier ist die Plunker!!

hoffe, das hilft !!

Answer 2

Statt

[checked]="price[i]" 

zuweisen den Anfangswert zu

price[i] 

dann [(ngModel)]="price[i] den Zustand der Checkbox aktualisieren