Obtenez case de la valeur HTML Angulaire 2 caractères d'imprimerie.

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

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

mais je ne suis pas sûr de la façon de récupérer la case à cocher valeurs à l'intérieur de mon Tapuscrit de fichier. Je sais que je peux accomplir cela en appelant une fonction distincte pour chaque case à cocher et la modification d'une valeur dans mon tapuscrit. Toutefois, cela ne semble pas être la meilleure façon - si j'avais une dizaine de cases à cocher puis j'aurais besoin de 10 fonctions différentes dans mon tapuscrit.

Est-il une façon simple d'obtenir si la case à cocher est activée ou désactivée en fonction de l'id? Est-il un meilleur moyen?

Vous pouvez poster votre classe du composant de code? Je pense que vous devriez utiliser angulaire de la liaison de données sur l'entrée.

OriginalL'auteur Roka545 | 2016-11-29

  1. 8

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

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

    et dans votre classe du composant:

    export class AppComponent { 
  checkboxValue: boolean = false;
}
    Ajouté ce et a obtenu l'erreur suivante: 'ne Peut pas se lier à 'ngModel', car il n'est pas connu de la propriété de 'entrée'. J'ai importé FormsModule dans ma classe.
    Vous devez importer FormsModule dans votre NgModule importations, non seulement dans votre classe. angulaire.io/docs/ts/latest/tutoriel/...
    Il ne fonctionne pas si vous ne définissez pas l'attribut "name". Aucune idée de où trouver l'angle de la version que j'utilise, probablement Angulaire 5 (fraîches .Net projet a démarré il y a 2 mois).

    OriginalL'auteur andrea.spot.

  2. 1

    vous pouvez lier à la vérification de la propriété de input élément 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;
}

    Ici est la Plunker.

    Espérons que cette aide!!

    Le Plunker ne fonctionne plus. Obtient une erreur: (SystemJS) XHR d'erreur (404) de chargement unpkg.com/rxjs/operators.js

    OriginalL'auteur Madhu Ranjan

  3. 0

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

    OriginalL'auteur lastWhisper