Wie Feld Schleifeneingang auf Array-Basis

Question

Ich habe ein Array wie unten

standardInput:any = [{val:'1'},{val:'2'},{val:'3'}]; 

Wenn ich es Schleife

meiner Ansicht

<div class="form-group row text-right" *ngFor='let row of standardInput' >{{row.val}} 
    <label class="col-sm-3 form-control-label m-t-5" for="password-h-f"></label> 
     <div class="col-sm-9 form-control-label m-t-5" for="password-h-f"> 
      <div class="row"> 
       <div class="col-sm-9" > 
        <input class="form-control" name="roles" [formControl]="form.controls['service_standard_sub_heading']" [(ngModel)]="row.val" id="email-h-t" type="email"> 
       </div> 
       <div class="col-sm-3"> 
       <button class="btn btn-danger" (click)="removeInputs('standard',i)">Remove</button> 
       </div> 
      </div> 
      </div> 
     </div> 

Die Ausgabe lautet: 3 3 3, zeigt, ist es nur das letzte Objekt im Array für die 3 Iterationen.Ich bin nicht in der Lage zu verstehen, was der Grund ist.Kann jemand bitte Hilfe vorschlagen.Thanks.

Answer 1

Ich glaube, Sie Template-driven Form verwenden, wenn nicht, lassen Sie mich wissen, und wir können für die modellgetriebene Form zu einer Lösung suchen :)

In Formularen, die name Attribut eindeutig sein muss. Obwohl die ngModel eindeutig ist, kümmert sich Angular nicht wirklich darum, sondern schaut sich stattdessen das name-Attribut an. Da Sie ein vorlagengesteuertes Formular und ngModel verwenden, sehe ich keine Notwendigkeit, formControl hier zu verwenden, können Sie stattdessen nur auf die ngModel und name Attribut verlassen. Also, den eindeutigen Namen Attribut zu bekommen, können wir die row.val daran binden, etwa so:

[name]="row.val" 

so Ihre komplette Vorlage würde wie folgt aussehen:

<form #form="ngForm"> 
    <div class="form-group row text-right" *ngFor='let row of standardInput'> 
    <input class="form-control" [name]="row.val" [(ngModel)]="row.val"> 
    </div> 
</form>