javascript - Angular2 - md-slide-toggle 显示错误的值

Question

我的问题是 md-slide-toggle 的值正确，但显示错误。

例如:

开始时值为 1，切换处于事件状态。

1. 按下开关的时间:值为 0 但开关仍处于事件状态。

2. 按下开关的时间:值为 1，但现在开关现在处于非事件状态。

3. ...

在这里查看:https://plnkr.co/edit/kxehpwaat5dezNActZbn?p=preview

//.html

<md-card>
  <md-slide-toggle ngDefaultControl (click)="onClick()"
     [ngModel]="(device)"></md-slide-toggle>
     {{device}}
</md-card>

//.ts

device:number = 1;

onClick() {
            let tmp;
            if (this.device == 1){
               tmp=0;
            }
            if (this.device == 0){
               tmp=1;
            }
            this.device=tmp;
        }
}

Answer 1

你是对的，没有使用 Slide Toggle Component以前，默认情况下这似乎是一种奇怪的行为，尽管这似乎有效:

取自您的 Plunker:

模板

<md-card>
     <md-slide-toggle 
      ngDefaultControl 
      (change)="onChange($event)" 
      [checked]="device"></md-slide-toggle>
     {{device}}
</md-card>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'slide-toggle-overview-example',
  templateUrl: './slide-toggle-overview-example.html',
})
export class SlideToggleOverviewExample {

  device:number = 1;

  onChange(e: Event) {
        if (e.checked == true) {
          this.device = 1;
        } else {
          this.device = 0;
        }
    }
}

Working Plunker

起初，我以为是您同时使用了 ngModel 绑定(bind)和 click 绑定(bind)，但事实并非如此事实并非如此(因为我最终注意到您使用的是单向)。当您尝试分配数值而不是 boolean 时，它们似乎从一开始就不同步。

因为这确实也按预期工作:

模板

<md-card>
     <md-slide-toggle ngDefaultControl
     [(ngModel)]="device"></md-slide-toggle>
     {{device}}
</md-card>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'slide-toggle-overview-example',
  templateUrl: './slide-toggle-overview-example.html',
})
export class SlideToggleOverviewExample {
  device:boolean = true;
}

尽管如此，ng 团队似乎至少知道问题“Slide toggle - (change) event will be fired even when the slider has not change.”中提到的这个问题的一个版本