Bind ob ein Array von Array

Question

In meinen Komponentenobjekten, habe ich eine Reihe von Zeilen, die mit Daten von Back-End-

this.rows = []; // somehow put data inside 

in jedem dynamisch bevölkert ist, die ein weiteres Element ist auch eine Reihe von Säulen , die auch vom Backend generiert werden.

const row = { 
     ColorId: 0, 
     SizeId: 0, 
     Quantity: 0, 
     Fields: this.Product.Personalizations.map(p => { 
     return { 
      Value: '', 
      ID: p.ID, 
      Required: p.Required, 
      Price: p.Price, 
      Description: p.Description, 
      Name: p.Name 
     } 
     }) 
    }; 

    this.rows.push(row); 

Ich versuche jedes Field an einen Eingang wie dieses

<div class="bulk-order-row" 
       [ngClass]="{'active-bulk-row': editingOnMobile}" 
       *ngFor="let row of rows; let i = index;"> 
... 
       <div class="col-personalization" *ngFor="let field of row.Fields"> 
        <div class="form-group"> 
        <label class="hidden-md-up">{{field.Name}}</label> 
        <input type="text" class="form-control-alt" [required]="field.Required" 
         [(ngModel)]="field.Value" name="{{field.Name}}" id="{{field.ID}}"> 
        </div> 
       </div> 

zu binden scheint, wie die Felder richtig gebunden sind, aber jedes Mal, wenn ich hängen Sie eine neue Zeile alle Eingabefelder leer geworden ? Wenn ich die tatsächlichen Werte in this.rows überprüfe, sehe ich, dass sie dort sind. Warum die input leer werden?

Answer 1

Das Problem wird dadurch verursacht, dass alle Eingaben in einer Zeile den gleichen Namen erhalten. den Index (idx) auf den Namen Hinzufügen behebt das Problem.

<tr *ngFor='let r of rows let idx=index'> 
    <td> 
     <input type='text' [(ngModel)]="r.quantity" name='quantity'> 
    </td> 
    <td *ngFor='let p of r.props'> 
     <input type='text' [(ngModel)]='p.value' name='{{p.name}}{{idx}}' [id]='p.id' 
     > 
    </td> 
    </tr> 

Plunker example