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

要做的第一件事是通过2种方式绑定到ngModel而不是checked，就像这样：

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

第二，您需要添加包装this.isChecked = this.isCheckedInit;。 setTimeout中添加，以便在完成材料处理之前不会将其设置为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类中创建一个属性：

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

在该类的ngOnInit()方法上：

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

仅此而已，我的朋友们。

角材料滑动切换捕获状态

2 个答案: