web-dev-qa-db-fra.com

Obtenir la valeur de la case à cocher à partir de HTML dans Angular 2 TypeScript.

J'ai deux cases à cocher dans mon HTML comme suit:

<label><input type="checkbox" id="checkbox1" /> Folder 1: </label>
<label><input type="checkbox" id="checkbox2" /> Folder 2: </label>

mais je ne sais pas comment récupérer les valeurs des cases à cocher dans mon fichier TypeScript. Je sais que je peux y parvenir en appelant une fonction distincte pour chaque case à cocher et en modifiant une valeur dans TypeScript. Cependant, cela ne semble pas être la meilleure solution - si j'avais dix cases à cocher différentes, j'aurais besoin de 10 fonctions différentes dans mon TypeScript.

Existe-t-il un moyen simple de savoir si la case à cocher est activée ou non en fonction de l'identifiant? Y a-t-il un meilleur moyen que cela? 

htmlangularcheckboxtypescript
5
Roka545

Si vous voulez lier la case à cocher dans les deux sens, vous devez utiliser la liaison ngModel.

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

et dans la classe de votre composant:

export class AppComponent { 
  checkboxValue: boolean = false;
}
8
andrea.spot.

vous pouvez vous lier à la propriété vérifiée de l'élément input comme ci-dessous,

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>
  <label><input type="checkbox" [checked]="checkbox1" /> Folder 1: </label>
<label><input type="checkbox" [checked]="checkbox2" /> Folder 2: </label>
  `
})
export class AppComponent { 
  name = 'Angular'; 
  checkbox1 = false;
  checkbox2 = true;
}

Voici le Plunker .

J'espère que cela t'aides!!

1
Madhu Ranjan

Vous pouvez utiliser [value]="myVariable" dans les cases à cocher!

0
lastWhisper