Problème de conception matérielle angulaire2

Question

Je construis une application angulaire2 dans laquelle, j'utilise le md-slide-toggle dans ma validation de formulaire. Au cours de l'onSubmit lorsque je console la valeur, elle me renvoie null par défaut. Comment assigner la bascule md-slide-faux par défaut

<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> 

Quelqu'un ayant ce problème

Answer 1

Dans votre app.component.ts, l'importation OnInit de @angular/core, puis ajouter ngOnInit() avec des choses que vous devez initialiser la charge.

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; 
    } 
} 

Sinon, faites ceci:

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

Le problème peut être résolu par la façon simple suivante en créant une variable dans votre fichier composant.

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

les lier à la balise comme le code HTML suivant

<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>