web-dev-qa-db-ja.com

Angular2-md-slide-toggleに間違った値が表示される

私の問題は、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;
        }
}
javascripthtmlangularmaterial-designangular-material2
12
ALSTRA

Slide Toggle Component を以前に使用したことがないのは正しいです。これはデフォルトでは奇妙な動作のように見えますが、これはうまくいくようです：

プランカーから取得：

テンプレート

<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バインディングとclickバインディングを同時に使用することだと思っていましたが、そうではありませんでしたケース（最終的に一方向を使用していることに気付いたため）。 booleanの代わりに数値を割り当てようとすると、最初から同期が外れているようです。

このようにdoesも同様に機能します：

テンプレート

<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チームは、問題で言及されているこの問題の少なくともバージョンを認識しているようです。「 スライダーが変更されていなくても、スライドトグル-（変更）イベントが発生します。 "

12
Steve Gomez

イベントからオブジェクトプロパティのチェック値を見つける必要があります。私のための作業コード

テンプレート

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

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

わたしにはできる

0
Sergey Lontkovskiy