web-dev-qa-db-fra.com

Angular2 ngModel inside of ngFor

J'essaie de lier un tableau de chaînes à partir de mes entrées, donc dans le fichier html j'ai écrit ceci:

<div *ngFor="let Word of words; let in=index" class="col-sm-3">
      <div class="form-group">
        <input type="text" [(ngModel)]="words[in]"  class="form-control" [attr.placeholder]="items[in]" required>
      </div>
  </div>

Mais cela n'a pas fonctionné comme prévu car lorsque j'enregistre la variable mots, elle affiche un tableau vide tel qu'initialisé dans ma classe Component. En outre, j'enregistre la variable d'un autre composant si cela devait être le problème pour mon problème. J'ai deux composantes:

  • Composant de formulaire qui contient un tableau de composants de requête.
  • Composant enfant de requête qui possède un tableau de chaînes de mots.

Ainsi, la variable de mots est déclarée dans le composant de requêtes, mais j'enregistre cette variable via le composant de formulaire comme ceci:

console.log(JSON.stringify(this.queries));

Alors que les requêtes sont un tableau de requêtes dans le composant de formulaire:

queries:Query[] = [];

Merci de votre aide!

data-bindingangularangular2-ngmodel
10
Mehdi Benmoha

Le problème vient de l'utilisation d'un tableau de valeurs primitives (words) dans ngFor.

Vous pouvez changer des mots en un tableau d'objets comme

words = [{value: 'Word1'}, {value: 'Word2'}, {value: 'Word3'}];

et l'utiliser comme

  <div *ngFor="let Word of words; let in=index" class="col-sm-3">
      <div class="form-group">
        <input type="text" [(ngModel)]="words[in].value"  class="form-control" [attr.placeholder]="items[in]" required>
      </div>
  </div>

Cela peut également être résolu en utilisant trackBy mais je ne suis pas sûr.

17
Günter Zöchbauer

Chaque balise d'entrée doit avoir un attribut 'nom' unique défini, comme décrit dans:

Angular2 ngModel à l'intérieur de ngFor (données non contraignantes en entrée)

Voici le code corrigé:

<div *ngFor="let Word of words; let in=index" class="col-sm-3">
  <div class="form-group">
    <input type="text" [(ngModel)]="words[in]" name="Word{{in}}" class="form-control" [attr.placeholder]="items[in]" required>
  </div>
14
Mate Šimović

Résolu cela en utilisant la fonction @Input () et en passant le tableau de requêtes + le numéro d'index de requête. Merci les gars pour le soutien.

1
Mehdi Benmoha