Angulaire 2 Matériau - Pourquoi mon entrée est-elle désélectionnée?

Question

J'ai un problème étrange.

J'utilise angulaire CLI et j'ai ajouté Matériel 2 à elle. J'ai créé quelques entrées avec ngfor et les ai liées à ngmodel. Tout fonctionne bien.

Mais chaque fois que je tape quelque chose, l'entrée est désélectionnée.

Voici le code HTML du composant:

<md-input-container class="treatments" *ngFor="let t of treatment; let i = index"> 
    <input mdInput placeholder="treatment {{ i + 1 }}" 
     value="{{ t[i] }}" name="treatment_{{ i + 1 }}" [(ngModel)]="treatment[i]"> 
</md-input-container> 

Lorsque je supprime le ngmodel, il ne fonctionne à 100%.

Answer 1

Vous itérez un tableau de type primitif, et donc ils sont comparés par valeur. Lorsque vous modifiez un traitement (par exemple t), toutes les valeurs sont détruites et de nouvelles créées, ce qui entraîne une perte de focus du champ. Cela peut être résolu en utilisant trackBy, qui suit les traitements par l'index et ne fait que détruire et recrée le traitement que vous modifiez.

Alors ajoutez trackBy:

<md-input-container class="treatments" *ngFor="let t of treatment; 
    let i = index; trackBy:trackByFn"> 

et TS ajouter la fonction:

trackByFn(index, treatment) { 
    return index; 
} 

Answer 2

Le problème est que vous essayez de lier ngModel aux valeurs primitives. Vous pouvez résoudre le problème de désélection en ajoutant @Input() avant la déclaration treatment.

@Input() treatment: string[] = [ "treatment 1", "treatment 2"]; 

Mais il ne mettra pas à jour les valeurs dans le tableau. Si vous souhaitez mettre à jour les valeurs, ngModel doit être lié à la propriété de l'objet. J'ai ajouté les deux exemples dans ce Plnkr.

Pour plus d'informations, reportez-vous cette question SO Angular2 ngModel inside of ngFor