web-dev-qa-db-fra.com

ng-reflect-model montre une valeur correcte mais ne reflète pas en entrée

J'ai rencontré un problème très étrange dans lequel mon application se comportait mal dans un cas d'utilisateur très spécifique. J'ai un portail où les utilisateurs peuvent ajouter des questions et des réponses, puis les éditer. Dans ce cas, lorsque je supprime un ensemble (q + a), puis que je tente de l'ajouter, le modèle est mis à jour, mais mon point de vue prend des valeurs des espaces réservés et se met à jour. Ici, je ne fais qu'épisser et pousser des valeurs dans un tableau et le rendu avec ngFor. Le dernier élément est un mannequin et est utilisé pour entrer les valeurs qui sont poussées vers le haut.

Joindre une capture d'écran si cela a du sens.

Vous pouvez voir que pour la zone de texte, ng-reflect-model affiche la question correcte, mais l'élément lui-même affiche le texte de l'espace réservé.

 

angularangular2-templateangular2-forms
11
Pratik Barasia

Apparemment, le problème était dû au fait que Angular n'était pas capable de suivre correctement les éléments de mon tableau. J'ai découvert cela très durement. Donc, en ajoutant simplement un attribut trackBy à mon ngFor, j’ai pu résoudre ce problème.

Ajouté ceci à mon composant:

customTrackBy(index: number, obj: any): any {
  return index;
}

puis dans le modèle:

<div class="margin-bottom-15"
     *ngFor="let assessment of language.assessments; trackBy:customTrackBy">

Donc, fondamentalement, je demande à Angular de suivre mes éléments dans le tableau par index. Cela a résolu le problème.

Ici, l'évaluation est le modèle pour chaque ensemble de questions-réponses.

11
Pratik Barasia

Si vous utilisez ngFor imbriqué, les attributs de nom risquent de ne pas être uniques. Cela devrait être unique. Donc suffixe-nom attribut avec les index de la boucle for pour le rendre unique.

 <form #f="ngForm" validate>
      <div *ngFor="childItem of parentArray; index as pIndex;">
           <div *ngFor="childArray of childItem.parameters;index as cIndex;">
                 First Name: <input name="childArray-{{pIndex+''+cIndex}}" 
                 type="text" [(ngModel)]="childArray.firstname" required>
                 Last Name: <input name="childArray-{{pIndex+''+cIndex}}" 
                 type="text" [(ngModel)]="childArray.lastname" required>

                <button type="button" [disabled]="!f.valid"
                (click)="submitForm();"> Submit  </button>
            </div>
       </div>
 </form>
0
Ankush Vaish