angular2 Material Design Problem

Question

Ich baue eine angular2-Anwendung, in der ich den md-slide-toggle in meiner Formularvalidierung verwende. Während der onSubmit, wenn ich den Wert truste, gibt es standardmäßig Null zurück. Wie die md-Toggle-Folie zuweisen, falsch sein standardmäßig

<form #formtest=ngForm (ngSubmit)=onSubmit(formtest.value)> 

    <div class="form-group" *ngFor="let temp of value"> 
    <md-slide-toggle [checked]="isChecked" color="primary" name={{temp}} ngModel> {{temp}}</md-slide-toggle> 
    </div> 
    <button md-raised-button type="submit">Check</button> 
    </form> 

Hat jemand dieses Problem mit

Answer 1

In Ihrem app.component.ts, Import OnInit von @angular/core, fügen Sie dann ngOnInit() mit Material, das Sie auf Last zu initialisieren haben.

app.component.ts:

import {Component, OnInit} from '@angular/core'; 
// Your other imports here 

@Component({ 
    selector: 'app-root', 
    templateUrl: '/path/to/app.component.html' 
}) 

export class AppComponent implements OnInit { 
    checked: boolean; 
// NgOnInit is required or else Angular will throw an error 
    ngOnInit() { 
     this.checked = false; 
    } 
} 

Alternativ dies tun:

import {Component} from '@angular/core'; 
// Your other imports here 

@Component({ 
    selector: 'app-root', 
    templateUrl: '/path/to/app.component.html' 
}) 
export class AppComponent { 
    checked: boolean = false; 
} 

Answer 2

Das Problem durch folgende einfache Weise gelöst werden kann, indem eine Variable in der Komponentendatei zu erstellen.

public value =[{name:'one' ,checked:false}, 
    {name:'two' ,checked:false}, 
    {name:'three' ,checked:false}]; 

binden sie an den Tag als die folgenden HTML

<form #formtest=ngForm (ngSubmit)=onSubmit(formtest.value)> 

    <div class="form-group" *ngFor="let temp of value"> 
    <md-slide-toggle color="primary" name={{temp.name}} [(ngModel)] = "temp.checked" > {{temp.name}}</md-slide-toggle> 
    </div> 
    <button md-raised-button type="submit">Check</button> 
    </form>