web-dev-qa-db-fra.com

Cochez et décochez la case dans Angular 2 par valeur booléenne

Je voudrais activer la case à cocher dans Angular 2 automatiquement cochée ou décochée. Lorsque la valeur est 1, la case à cocher est cochée et celle à 0, la case à cocher est automatiquement désélectionnée.

public LightControl() {
    this.dataLight = this._LightService.AutoLightController(this._ConnectService.SocketInstanse())
        .subscribe(data => {
            this.temp = JSON.stringify(data['status']);
        })
}

HTML: 

 <div class="togglebutton">
    <label> <input type="checkbox" [checked]="temp(change)="temp">Light</label>
 </div>
  • Lorsque la valeur temp est true, elle est cochée, mais lorsque temp est false, elle n'est pas désélectionnée automatiquement. 
angulartypescriptcheckboxangular2-directives
3
ryan

Utilisez la propriété cochée du champ de saisie. Lier une variable booléenne à la propriété cochée de la case à cocher d'entrée. Utilisez un concept observable et abonnez-vous à la variable de données qui déclenchera la visibilité de la case à cocher du champ de saisie . [vérifié] = 'votreModèle.isChecked ' Dans la méthode subscribe, affectez le statut actuel à cette propriété isChecked de votre modèle. Et en fonction de la valeur actuelle de cette propriété, la case à cocher sera cochée ou décochée.

observableVariable.subscribe(data => { données de processus ou en fonction des données traitées, attribuez le statut à

yourModel.isChecked = status

});

2
Abhishek Kumar

MODIFIER:

Commencez par créer une SharedModule:

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {RouterModule} from '@angular/router';


@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule
  ],
  exports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule
  ],
  declarations: []
})

export class SharedModule {}

Importez ensuite cette SharedModule dans le module de la route devant utiliser la case à cocher.

Vous pourrez maintenant utiliser des directives spécifiques telles que ngModel.

<input type="checkbox" [(ngModel)]="isChecked">

En composant:

this.isChecked = Number(data['status']) === 0 ? false : true;
0
Chrillewoodz

Essaye ça:

<input type="checkbox" [checked]="temp == 1 ? '' : null">

Ceci affichera l'attribut vérifié uniquement lorsque temp est égal à 1.

0
Charmy Shah

angular 2 la valeur de la case à cocher est vraie, la case à cocher est sélectionnée:

    <div class="togglebutton">
      <label> <input type="checkbox" [value]="true" [(ngModel)]="temp">Light</label>
    </div>

si temp est booléen, vous devez utiliser [value]="true", lorsque temp est true, la case à cocher est sélectionnée, si temp est false, la case à cocher n'est pas sélectionnée, si vous utilisez value="true", le temp est string.

0
yesterday_time