Inconsistent behaviour of inputs values linked to an array in Angular - arrays

Question

I am using an array of numbers in an Angular Component, linked to a series of inputs in the html template, using *ngFor. When a change is detected on a given input, the value of the corresponding cell in the array is updated. I checked it and the values of the array in the components are correctly updated.
However, a new value on a given input sometimes impact the value shown in another input (i.e. the new value is also written in that input). This usually happens with different inputs whose values are initially identical. It also seems to always be an input further in the loop that is impacted.
What is even more strange is that if I display the values of the array as plain text, the values shown are always correct.
I also manually set unique names and ids to the inputs in order to avoid any possible confusion, with no result.
I have made a small jsfiddle code showing the issue. The issue is immediately visible if you change the first input value to '2': the second input will also see its values changed to '2'.
The jsfiddle is using Angular 4, I have tested with Angular 6 and it doesn't work either.
Any idea what I might be doing wrong or where the issue is ?
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);
<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>

Answer 1

using (input) instead of (change) can working
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}}" id="input-{{i}}" value="{{v}}" (input)="onChange($event,i)"/><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);
}
// event first
onChange(event,i: number)
{
this.values[i] = parseInt(event.target.value);
console.log(event)
}
}
const { BrowserModule } = ng.platformBrowser;
#NgModule({
imports: [ BrowserModule ],
declarations: [ HomeComponent ],
bootstrap: [ HomeComponent ]
})
class AppModule { }
const { platformBrowserDynamic } = ng.platformBrowserDynamic;
platformBrowserDynamic().bootstrapModule(AppModule);
suggest using [(ngModel)] instead of value ,(ngModelChange) instead of (change),do not mixed