綁定數組的ob對象的數組

在我的組件，我有在每個與從後端綁定數組的ob對象的數組

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

數據動態填充行的陣列有這也是列的陣列另一元件，這也是由後端生成的。

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);

我想每個Field綁定到輸入這樣

<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>

好像領域適當的約束，但每次我追加一個新行的所有輸入字段變成空白？如果我檢查this.rows中的實際值，我發現他們在那裏。爲什麼input變成空白？

來源

2016-12-03 Eugen

可能與'this.Product.Personalizations.map（p值=> {'被重新評估阿Plunker –

這裏是最小的Plunk：https：//plnkr.co/edit/nm3y6MrR4kh0n8Sq6XwU 我看到它的方式，問題是由[必需的]創建的，點擊[AddRow]填充一些值，然後[再次添加行]，字段值不再。 – Eugen

該問題是由一行中的所有輸入獲取相同名稱引起的。添加指數（idx）將該名稱修復該問題：

<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

來源

2016-12-04 11:22:27

Thx，解決了問題！ – Eugen

綁定數組的ob對象的數組

回答

相關問題