Съемка углового сдвига материала - PullRequest
Новая
       10

Съемка углового сдвига материала

0 голосов
/ 17 ноября 2018

У меня довольно простой слайд-переключатель. Я хочу выполнить 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 для отображения текущего поведения.

Что я должен изменить, чтобы получить желаемое поведение?

1 Ответ

0 голосов
/ 17 ноября 2018

Первое, что нужно сделать, это связать с 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);

Вот демонстрация Stackblitz

...