Angular ngModel in ngForm mit Anzahl Array

Question

Ich bin seit einer Weile auf ein Problem stecken und ich kann nicht herausfinden, warum das passiert.

Ich habe eine values: number[] = [10,10] Variable in meiner Komponente. Wenn ich die erste Eingabe modifiziere, bewegt sich der Cursor beim keyDown manchmal auf den nächsten Eingang oder verliert den Fokus. Hier

ist ein Beispiel Plunker: https://embed.plnkr.co/N4PO5CNvn0WJChgNIo59/

bearbeiten: Bewegen Sie den Cursor auf die nächste Eingabe, wenn die beiden Werte gleich sind. Beispiel: 10, 10. Wenn ich irgendeine Zahl eingeben werde, wird der Fokus zum nächsten Eingang übertragen. BTW Ich benutze Chrome neueste Version

Answer 1

Ich stieß auf dieses Problem, und zum Glück für Sie erinnere ich mich, wie es zu lösen!

Um dies zu beheben, müssen Sie eine benutzerdefinierte TrackBy-Funktion definieren.

Fügen Sie diese in Ihrem * ngFor:

*ngFor="let val of values; let i = index; trackBy: trackByFn" 

In Ihrer Komponente TS:

trackByFn(index, item) { 
    return index; // or item.id 
} 

es getestet einfach auf plunkr, wirkt wie ein Zauber!

Answer 2

Folgenden Code verwenden.

import { Component, Input, Output, EventEmitter } from '@angular/core'; 

@Component({ 
    selector: 'my-app', 
    templateUrl: "./app.component.html" 
}) 
export class AppComponent { 
    values: number[] = [10, 10]; 
    label: string; 

    public updateValue(event, index) { 
     this.values[index] = +event.target.value; 
     console.log(this.values); 
    } 
} 



<div class="field"> 
    <span *ngFor="let val of values; let i = index"> 
     <input type="number" [attr.name]="'test' + i" [value]="val" (change)="updateValue($event, i)" >, 
    </span> 
    </div>