web-dev-qa-db-fra.com

Angular2 - md-slide-toggle affiche la mauvaise valeur

Mon problème est que le md-slide-toggle a la bonne valeur mais l'affiche mal.

Par exemple:

Au début, la valeur est 1 et la bascule est active.

  1. Heure de pression sur la bascule: la valeur est 0 mais la bascule est toujours active.

  2. Heure de pression sur la bascule: la valeur est 1 mais maintenant la bascule est maintenant inactive.

  3. ...

Vérifiez-le ici: 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

Vous avez raison, n'ayant pas utilisé Slide Toggle Component avant, cela semble être un comportement étrange par défaut, bien que cela semble fonctionner:

Extrait de votre Plunker:

Modèle 

<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 de travail

Au début, je pensais que c'était votre utilisation de la liaison ngModel et la liaison click en même temps, mais ce n'était pas le cas (puisque J'ai finalement remarqué que vous utilisiez un aller simple). Il semble qu'ils se désynchronisent dès le début lorsque vous essayez d'affecter une valeur numérique au lieu d'un boolean.

Comme ceci le fait fonctionne aussi comme prévu:

Modèle 

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

Cependant, il semble que l'équipe ng soit au moins au courant d'une version de ce problème mentionnée dans le problème " L'activation/désactivation de la diapositive - (changement) sera déclenchée même lorsque le curseur n'a pas changé. "

12
Steve Gomez

Vous devez trouver la valeur vérifiée de la propriété d'objet de l'événement. Code de travail pour moi

Modèle

<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

J'ai résolu ce problème avec setTimeout; Dans votre fichier html, ajoutez un identifiant à #contract

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

dans votre fichier .ts utilisez

@ViewChild('contract') contract: MatSlideToggle;

avant constructeur;

et à l'intérieur de ngOnInit() ajoutez simple:

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

ça marche pour moi

0
Sergey Lontkovskiy