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

你是对的,之前没有使用过幻灯片切换组件,默认情况下看起来确实是一种奇怪的行为,尽管这似乎有效:

取自您的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;
        }
    }
}

工作的Plunker

起初,我以为是你的使用ngModel结合,并与click在同一时间绑定,但情况并非如此(因为我终于发现你正在使用单程).当您尝试分配数值而不是a时,它们似乎从一开始就不同步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团队至少知道问题中提到的这个问题的一个版本" 幻灯片切换 - (更改)事件将被触发,即使滑块没有改变. "

Answer 2

您必须从 event 中找到对象属性检查值。为我工作的代码

模板

<md-card>
     <md-slide-toggle 
      [(ngModel)]="device"
      (change)="onChange($event)"></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(value) {
        if (value.checked == true) {
          this.device = 1;
          console.log(1);
        } else {
          this.device = 0;
          console.log(0);
        }
    }
}