Question

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

例如：

在开始时，该值为1，并且切换处于活动状态。

按下切换的时间：值为0，但切换仍处于活动状态。
按下切换的时间：值为1但现在切换现在处于非活动状态。
...

请在此处查看：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绑定和 click绑定，但情况并非如此（因为我最终注意到你正在使用单向）。当您尝试分配数值而不是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团队至少知道问题中提到的此问题的一个版本＆＃34; Slide toggle - (change) event will be fired even when the slider has not change.＆＃34;

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);
        }
    }
}

Answer 3

我用setTimeout解决了这个问题；在您的html文件中，向#contract

添加一个ID

<mat-slide-toggle color="primary" formControlName="contract" #contract>
  Contract
</mat-slide-toggle>

在您的.ts文件中使用

@ViewChild('contract') contract: MatSlideToggle;

构造函数之前；

和ngOnInit()内部添加简单：

setTimeout(() => {
  this.contract.toggle();
});

对我有用

Answer 4

在您的HTML

 <mat-slide-toggle [checked]="flags" (change)="flagsChange();" color="primary">
                            {{flags ? 'YES' : 'NO'}}</mat-slide-toggle>

在TS

  reimbursableChange() {
    if (!this.flags.reimbursable) {
      this.flags.reimbursable = true;
    } else {
      this.flags.reimbursable = false;
    }
  }

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

4 个答案: