Angular Material 滑动切换捕捉状态

Question

我有一个相当基本的滑动切换。一旦切换了 slider ，我想执行 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

首先要做的是绑定(bind)到ngModel而不是 checked , 具有 2 路绑定(bind)，如下所示:

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

其次，您需要添加包装 this.isChecked = this.isCheckedInit;在 setTimeout ，以便在 Material 完成之前不会将其设置为 false。

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

Here is a Stackblitz demo