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

Posted 2023-02-22

【中文标题】Angular2 - md-slide-toggle 显示错误的值

【英文标题】：Angular2 - md-slide-toggle displays the wrong value

【发布时间】：2017-08-05 04:59:52

【问题描述】：

我的问题是 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;
        

【参考方案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 团队似乎至少知道问题“Slide toggle - (change) event will be fired even when the slider has not change.”中提到的此问题的一个版本

【讨论】：

在我的情况下，我不能使用 ngModel，因为我使用的是 formControl，而且这个切换不是表单字段的一部分，它只是用来显示更多字段。

【参考方案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);
        
    

【参考方案3】：

我用setTimeout解决了这个问题； 在您的 html 文件中，将 id 添加到 #contract

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

在您的.ts 文件中使用

@ViewChild('contract') contract: MatSlideToggle;

在构造函数之前；

在ngOnInit()内部 添加简单：

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

对我有用

【参考方案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;