默認情況下，“角度材質”幻燈片切換組件為null

Question

我正在構建一個Angular應用程序，其中在表單驗證中使用了md-slide-toggle組件。

在onSubmit方法上，當我將值記錄到控制台時，默認情況下記錄為null。 如何將md-toggle-slide的值默認設置為false？

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

Answer 1

在您的app.component.ts ，從@angular/core導入OnInit ，然后添加ngOnInit生命周期掛鈎，其中包含方法，聲明以及您必須在加載時初始化的任何其他內容。

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

或者，首先為屬性分配一個值：

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

可以通過以下簡單的方法在組件文件中創建變量來解決此問題：

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

並使用以下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>