Angular material 滑动切换捕获状态

Question

我有一个相当基本的滑动开关。我想在切换滑块后执行 HTTP 调用，以防万一我的 HTTP 调用失败，将其恢复为初始值。我是这样做的：

import { Component } from '@angular/core';
import { MatSlideToggleChange } from '@angular/material';
import { FakeService } from './fake.service';

@Component({
  selector: 'slide-toggle-configurable-example',
  templateUrl: 'slide-toggle-configurable-example.html'
})
export class SlideToggleConfigurableExample {
  isChecked = false;
  isCheckedInit = false;

  constructor(private readonly fakeService: FakeService) {}

  onChange(value: MatSlideToggleChange) {
    const { checked } = value;

    this.fakeService.throwUp(checked).subscribe(
      () => {},
      () => {
        this.isChecked = this.isCheckedInit;
      }
    );
  }
}

但是，这不起作用。我的模板看起来像这样：

<mat-slide-toggle
    (change)="onChange($event)"
    [checked]="isChecked">
  Slide me!
</mat-slide-toggle>
<section>
  {{ isChecked }}
</section>

但是 isChecked 值永远不会改变，并且始终显示为 false。

似乎我在 isChecked 字段上所做的任何事情都没有改变它的值。

这里 Stackblitz 显示当前行为。

我必须更改什么才能获得所需的行为？

Answer 1

首先要做的是绑定到 ngModel 而不是 checked，使用 2 种方式绑定，如下所示：

<mat-slide-toggle
    (change)="onChange($event)"
    [(ngModel)]="isChecked">
  Slide me!
</mat-slide-toggle>

其次，你需要添加 wrap the this.isChecked = this.isCheckedInit;在 setTimeout 中，以便在 material 完成之前不会将其设置为 false。

setTimeout(() => this.isChecked = this.isCheckedInit, 0);

Here is a Stackblitz demo

Answer 2

另一种选择是使用 formControl:

在组件 html 中：

<mat-slide-toggle [formControl]="toogle">
  Slide me!
</mat-slide-toggle>

在组件 ts class 中创建一个属性:

toogle = new FormControl('', []);

关于class的ngOnInit()方法：

ngOnInit():void {
   this.toogle.valueChanges.subscribe(newToogleValue=> {
      console.log("toogleValue", newToogleValue);
   });
}

就这些了，我的朋友们。

Angular material 滑动切换捕获状态

Angular material slide toggle capturing state

angular-material2

angular