Angular material 选中时滑动切换绑定不起作用

Question

看起来很简单，但我就是无法使滑动切换的 checked 绑定起作用。

（我正在使用 angular 9.1 和 material 9.2。）

这是 html:

<mat-slide-toggle [checked]="isSlideChecked" (change)="toggleChanges($event)">isSlideChecked: {{isSlideChecked}}</mat-slide-toggle>

<p *ngFor="let e of toggleEvents">{{e}}</p>

这是 TS：

import { Component, OnInit } from '@angular/core';
import { MatSlideToggleChange } from '@angular/material/slide-toggle';

@Component({
  selector: 'app-test-component',
  templateUrl: './test-component.component.html',
  styleUrls: ['./test-component.component.scss']
})
export class TestComponentComponent implements OnInit {

  public isSlideChecked: boolean = false;
  public toggleEvents: string[] = [];

  constructor() { }

  ngOnInit(): void {
  }

  toggleChanges($event: MatSlideToggleChange) {
    this.toggleEvents.push("Toggle Event: " + $event.checked)
  }
}

change 事件运行良好，$event.checked 始终设置正确。但是 checked 绑定不起作用，它总是停留在 false.

在我放弃使用一个普通的复选框之前，我希望这里有人能帮助我。有什么建议吗？

Answer 1

这是 working stackblitz 的 link。

我不确定为什么，但是当我从 isSlideChecked 中删除 public 时，绑定开始起作用。我还从 toggleEvents 数组中删除了 public。希望这有帮助。

Answer 2

material 滑动开关的属性选中仅用于输入绑定。因此，通过单击对切换所做的任何更改都不会在 [checked] 中输出。您将必须使用 (change) 事件来分配 event.checked.

中的值

toggleChanges($event: MatSlideToggleChange) { this.isSlideChecked = $event.checked; }

您可以参考 API 文档了解更多详情， https://material.angular.io/components/slide-toggle/api

Angular material 选中时滑动切换绑定不起作用

Angular material slide toggle binding on checked not working

angular-material

angular

angular9