Ich bin neu in der Webentwicklung und arbeite an einem MEAN-Stack-Projekt mit angle2. Ich versuche, mithilfe von ngFor ein vorlagengesteuertes Formular mit einer dynamischen Liste von Eingaben hinzuzufügen. Bei der Implementierung habe ich jedoch ein abnormales Verhalten festgestellt. Ich frage mich, ob ich es richtig mache ...

Normales Verhalten: Wenn ich zwei oder mehr Eingabefelder hinzufüge und die Eingabe für nicht zuletzt eingegebene Einträge entferne, werden beim nächsten Hinzufügen der neuen Einträge alle Einträge zurückgesetzt, die unter den soeben gelöschten Einträgen liegen. Außerdem sind die neuen Einträge irgendwie verbindlich mit den obigen Einträgen?

demo der Ausgabe

Hier ist mein Plunker:http: //plnkr.co/edit/FjLg8VDDo3E6fHVgS8ah? p = preview

Hier ist die Art und Weise, wie ich vorlagengesteuerte Formulare mit dynamischer Eingabe mithilfe von ngFor implementiere. Ich bezog mich auf einen anderen Stackoverflow-Beitrag: Angular-2-Template-Driven-Form-With-Ngfor-Inputs

<div *ngFor="let hero of heroArray; let i = index">

             <div class="form-group">
            <label for="name">Name</label>
            <input type="text" class="form-control" id="name"
                   required
                   [(ngModel)]="hero.name" name="name-{{i}}"
                   #name="ngModel" >
            <div [hidden]="name.valid || name.pristine"
                 class="alert alert-danger">
              Name is required
            </div>
          </div>
      </div>

Jede Hilfe wird gebeten. Vielen Dank