Comment générer des cases à cocher à l'aide de *ngFor et une liste de cartes

J'ai la carte suivante

.dart

List<Map<String, dynamic>> symptoms = [
  {'name': 'Dizziness', 'checked': false},
  {'name': 'Fainting', 'checked': false}
];

Mon incorrecte tentative en html est affiché en dessous

.html

<div class = "form-group">
        <div class = "form-control"
             ngControl = "symptoms">
          <label for="symptom" >Symptoms</label>
            <input
              type = "checkbox"
              *ngFor = "#symptom in symptoms"
              [checked]="symptom['checked']"/>

        </div>
  </div>

Mes questions sont les suivantes:

  1. L'étiquette pour chaque case doit être le symptôme "['nom'] - comment puis-je intégrer cela dans l' *ngFor?
  2. Comment puis-je déterminer qu'une case à cocher a été sélectionné?

EDIT 1

Je suis en train de voir la case et de l'étiquette à l'aide de l'suivantes:

  <div layout = "row"
       layout-align = "center"
       class = "form-group"
       *ngFor = "#s of symptoms">
    <label>{{s['name']}} </label>
    <input
        type = "checkbox"
        [checked] = "s['checked']"
        class = "form-control"/>
  </div>

Toutefois, l'étiquette semble être sur une ligne et la case sur l'autre. Je suis en utilisant bootstrap.min.css et je me demande si c'est la cause principale. Les cases sont plus grandes que prévu, aussi, comme indiqué ci-dessous:

Comment générer des cases à cocher à l'aide de *ngFor et une liste de cartes

Fois bravo, et merci
Teddy

OriginalL'auteur st_clair_clarke | 2016-01-02

  1. 2

    Votre ngFor syntaxe est incorrecte. L'expression doit être "#liaison de liste", pas dans. Voir Marc réponse pour une explication élaborée.

    Aussi, si vous voulez répéter l'étiquette et la case à cocher, vous devez déplacer le modèle le plus haut dans l'arborescence DOM. Pour cela, utilisez l'élargissement de la ngFor syntaxe.

    Enfin, l'utilisation ngModel au lieu de la liaison à checked - l'existence de l'attribut doit être checked="checked" ce qui n'est pas idéal pour la liaison à un Boolean.

    @Component({
  selector: 'my-app',
  directives: [NgFor],
  template: `{{title}} <br />
  <form>
  <div class = "form-group">
        <template ngFor #symptom [ngForOf]="symptoms">
        <div class = "form-control">
          <label for="symptom" >{{symptom.name}}</label>
            <input
              type = "checkbox"
              ngControl="symptom"
              [(ngModel)]="symptom['checked']" />
        </div>
        </template>
  </div>
  </form>
  `
})

    Démo Plnker

    Je vous remercie beaucoup.
    Je vous remercie beaucoup. Le 'dans' utilisé est à cause du mélange des expressions dans Dart Angulaire - mon erreur. Votre Plnker démo fonctionne très bien, mais je me pose des questions sur l'étiquette de nom {{symptôme.name}} - ne devrait-elle pas être {{symptôme['nom']}} à la place? Il est le seul qui fonctionne avec Dart. Comment puis-je déterminer la case était cochée?
    Je ne suis pas sûr si Dart change les choses, comme je ne sais pas Dart. Mais chacun devrait fonctionner: symptôme.nom ou symptôme['nom'] - les deux sont équivalents. Pour déterminer dont la case a été cochée, vous pouvez ajouter un gestionnaire d'événements click: (cliquez)="onClick(symptôme)". Voir la démo.
    Super et merci.

    OriginalL'auteur pixelbits