我的问题是 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;
}
}
最佳答案
你是对的,没有使用 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;
}
}
}
起初,我以为是您同时使用了 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.”中提到的这个问题的一个版本
关于javascript - Angular2 - md-slide-toggle 显示错误的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42793095/