角度材料滑动切换上的两种方式绑定无法按预期工作（Angular 4）答案

【问题标题】：Two way binding on angular material slide toggle not working as expected (Angular 4)角度材料滑动切换上的两种方式绑定无法按预期工作（Angular 4）
【发布时间】：2018-08-15 18:11:58
【问题描述】：

我已经实现了 angular material 滑动切换，除了由于某种原因它没有将值绑定到相关变量之外，一切似乎都可以工作？

// other irrevelant imports above..
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';

@Component({
  selector: 'app-calendar',
  templateUrl: './calendar.component.html',
  styleUrls: ['./calendar.component.scss'],
    host: {
     '(document:click)': 'handleClickEvent($event)',
  }
})

export class CalendarComponent implements OnInit {

  filteringSchedule: boolean = false;
  filteringSent: boolean = false;
  filteringFailed: boolean = false;
}

// 组件

<mat-slide-toggle
    class="calendar-filter-types"
    [ngModel]="(filteringSchedule)"
    [color]=""
    [checked]="">
    Scheduled : {{ filteringSchedule }}
</mat-slide-toggle>

一旦我选中或取消选中切换，我希望 filteringSchedule 值相应地更改为 true 或 false？然而，在组件中，由于某种未知原因，它始终保持为false - 任何人都可以提出这是为什么吗？

我是 Angular 4

【问题讨论】：

只要看看你的代码，你就可以像这样声明你的布尔值：filteringSchedule = false;过滤发送 = 假；过滤失败=假；由于打字稿隐式转换值，它将是布尔值。

标签： javascript angular angular-material2

【解决方案1】：

只需将您的 html 更新为

[(ngModel)]="filteringSchedule"

【讨论】：

@Zabs 没有问题 :) 很高兴为您提供帮助
在你的模块中也导入FormsModule

【解决方案2】：

这适用于 Angular8+

[(ngModel)]="filteringSchedule"

并确保您已经导入 FormsModule

import {FormsModule} from '@angular/forms';

【讨论】：

【解决方案3】：

[ngModel]="(filteringSchedule)"

将其更改为：

[(ngModel)]="filteringSchedule"

【讨论】：