Angular : synchronisation de value d'input avec élément d'un tableau

Dorian Baguette
Javascript

Bonjour, je travaille actuellement sur un projet angular et je rencontre un problème surprenant. J'utilise un tableau de nombres dans un composant angular, les éléments de ce tableau sont liés à une liste d'éléments de type input grâce à un ngFor. Quand un changement de valeur est détecté dans l'un des inputs la cellule correspondante du tableau est mise-à-jour. Après vérification, les valeurs du tableau sont correctes.

Cependant lorsque j'introduis une nouvelle valeur dans un des input, il arrive que parfois cela change la valeur d'un autre input (i.e. cette nouvelle valeur est aussi affectée à cet input). Ce comportement non-désiré se produit avec les autres inputs lorsque ceux-ci ont la même valeur initiale, il semble aussi que ce soit toujours les inputs qui se situent plus loin dans la boucle...

Ce qui est complètement incompréhensible, c'est que si j'affiche le contenu du tableau après l'input sous la forme de simple texte cote-à-cote avec les inputs, les valeurs textuelles affichées sont correctes.

J'ai testé le fait de mettre des noms et des ids uniques à chacun des inputs afin qu'angular puisse les distinguer... sans résutat le problème persiste.

J'ai réussi à reproduire le problème sur un jsfiddle dont voici le lien : https://jsfiddle.net/bruno19/qab9u4fw/49/
Le problème est immédiatement visible en changeant la 1ere value des inputs en '2', le second input prend alors la valeur '2' (même si la valeur du second élément du tableau reste 1). Le jsfiddle utilise la version 4 d'angular, mais mon projet original utilise la version 6 et le problème reste identique.

Si quelqu'un a une idée du pourquoi de ce comportement et comment le corriger... le but étend bien entendu que les values des inputs et les valeurs des éléments du tableau soient toujours synchronisées.

Voici le code du composant : 

let { Component, NgModule, OnInit } = ng.core;

@Component({
  selector: 'my-app',
  template: `
    <div *ngFor="let v of values; let i = index;" style="float: left;"><input type="text" name="input-{{i}}" [value]="v" (change)="onChange(i, $event)"/><p>{{ v }}</p></div>
  `,
})
class HomeComponent implements OnInit {
      public values: number[] = [];
        n = 5;
    ngOnInit() {
        for(let i = 0; i < this.n; i++)
            this.values.push(1);
    }
   onChange(i: number, event)
    {
        this.values[i] = parseInt(event.target.value);
    }
}
const { BrowserModule } = ng.platformBrowser;
@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ HomeComponent ],
  bootstrap:    [ HomeComponent ]
})
class AppModule { }
const { platformBrowserDynamic } = ng.platformBrowserDynamic;
platformBrowserDynamic().bootstrapModule(AppModule);

et voici le code du template : 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div *ngFor="let v of values; let i = index;" style="float: left;">
  <input type="text" name="input-{{i}}" [value]="v" (change)="onChange(i, $event)"/>
  <p>{{ v }}</p>
 </div>

Aucune réponse