Quelqu'un pourrait-il m'aider avec le code suivant et me donner une raison pour laquelle cela ne fonctionne pas. Je crée une série d'entrées à partir d'une matrice à chaîne et je souhaite lier chaque valeur d'entrée à son emplacement correspondant dans la matrice de chaîne. Semble être jolie standard, mais je ne semble pas saisir la question.
J'ai essayé les deux cas suivants, mais le tableau de couleurs (= string []) reste vide! P>
<tr *ngFor="let color of Colors; let i = index;">
<td>
<mat-form-field>
<input required matInput placeholder="Color ({{ i + 1}})" [name]="'color_' + i" [(ngModel)]="color">
</mat-form-field>
</td>
</tr>
<tr *ngFor="let color of Colors; let i = index;">
<td>
<mat-form-field>
<input required matInput placeholder="Color ({{ i + 1}})" [name]="'color_' + i" [(ngModel)]="Colors[i]">
</mat-form-field>
</td>
</tr>
4 Réponses :
Il semble que vous avez oublié de fermer la balise "TR".
Désolé, ce n'est que le code ci-dessus (j'ai essayé de supprimer autant de code non pertinent que possible). Merci pour les commentaires cependant!
Je pense que vous devriez essayer d'utiliser une balise "P" au lieu d'entrer et de voir si elle affiche les données de couleur ou non. Je pense que votre problème pourrait être pour utiliser
AFAIK NGMODEL exige que la variable soit une propriété de la classe.
Vous devriez essayer d'utiliser des formulaires réactifs puis dans votre code html quelque chose comme ça} J'ai écrit que j'ai écrit que à la volée alors ne sais pas si cela fonctionne. Mais avec quelques ajustements, cela devrait.
Merci pour cela! Je sais qu'il y a d'autres moyens de résoudre ce problème. Mais cela semble être en ligne avec l'approche du modèle et c'est très agréable et propre. Donc, c'est ma raison de demander. Merci d'avoir partagé votre code cependant!
Les chaînes sont immuables dans JavaScript, ce qui signifie que nous ne pouvons pas lier Ngmodel pour eux. Vous pouvez facilement convertir votre tableau en une matrice sur des objets avec la couleur de la clé et la valeur de vos chaînes. Cela réparerait votre problème de liaison. Voici un code. J'ai également piraté une stackbitz pour vous montrer.
Cependant, je recommanderais cependant la réponse de Joey Gough. Ce code est plus correct et "de manière angulaire" de résoudre ce problème.
Bonne chance!
Une solution parfaite: clair, correct et perspicace! Merci beaucoup, Jonas!
Hey Jonas, j'étais trop rapide: vous dites que les chaînes sont immuables en JavaScript, ce qui signifie que nous ne pouvons pas lier Ngmodel à eux. ' Mais pourquoi puis-je alors ngmodel-bind to une chaîne comme dans [(ngmodel)] = "Nom d'entreprise"? (avec Nom d'entreprise: String)
Parce que vous le liez à la variable (qui est une propriété de la classe). Qui est essentiellement une référence / pointeur d'une manière. Peut-être que c'était un peu simplifié de dire que les chaînes étaient la question ici, désolé. "Ngfor par défaut utilise l'identité d'objet pour comparer les valeurs, cette pause lorsque des valeurs primitives (numéro, chaîne, booléenne) sont utilisées, car elles changent d'identité lorsqu'ils modifient une modification)." - Il s'agit d'une description de niveau supérieur du même problème fondamentalement. Stackoverflow.com/Questtions/46991497/...
Voici une bonne discussion sur le sujet également: groups.google.com/forum / #! Sujet / angulaire / qgcrbpjihaq Ils obtenaient également que "Les objets de chaîne sont immuables, on ne peut" éditer "la valeur d'une chaîne, vous ne pouvez en remplacer qu'une avec une autre." Et cela provoque des problèmes car nous pouvons Ne pas garder une liaison à une valeur qui est supprimée, puis une nouvelle est créée.
Il est possible d'utiliser [(ngmodel)] ou réactifforms.
Le problème si vous utilisez [(NGModel)] est que vous ne pouvez pas itérer sur le réseau propre. p> mais vous pouvez utiliser p> oui est un travail-autour: non itérer sur des couleurs, juste sur un tableau Créez sur voler à l'aide de String.Repeat et Split P> <div *ngIf="formArray" [formGroup]="formArray">
<tr *ngFor="let control of formArray.controls;let i=index">
<td>
<mat-form-field>
<input matInput placeholder="Color ({{ i + 1}})" [name]="'color_' + i" [formControl]="control">
</mat-form-field>
</td>
</tr>
</div>
<hr/>
{{formArray?.value|json}}
Voir où vous dites
[(ngmodel)] = "couleurs [i]" ? C'est idiot, dis simplement[(ngmodel)] = "couleur" .... Vous avez déjà accès aux couleurs [i], c'est la couleur ...... Pourriez-vous vous montrer fichier .ts?[(ngmodel)] = "couleur" => C'est le premier cas que j'ai essayé (premier segment de code) et que cela n'était pas plus réussi
Pour le code: la seule chose pertinente dans le code est la déclaration du tableau de couleurs: Couleurs: String [] = []
Y a-t-il une erreur avec la console du navigateur?
Nope, pas d'erreur du tout