角2模型绑定（对象的数组）

Question

我是新来Angular2 ...我的问题很简单：我要绑定对象像下面这样的数组：

我有以下的组件（应用程序。 TS）和视图（cart.html）：

（app.ts）文件：

@Component({ 
selector: 'my-app', 
templateUrl: '../Partials/cart.html', 
styleUrls: ['../Partials/cart.css'] 
}) export class AppComponent{ 

constructor(private http: Http) { }; 
title = 'ASP.NET MVC 5 with Angular 2'; 
private headers = new Headers({ 'Content-Type': 'application/json' }); 

invoice: Invoice = {  

    customer: { 
     CustomerName: "Lorem Ipsum", 
     Address: "102/102 East Hills Road", 
     Suburb: "East Hills", 
     State: "NT", 
     PostCode: "3563"    
    }, 
    products: [ 
     { 
      id: "1", 
      desc: "Mig Mac", 
      unit_price: 8.5, 
      quantity: 5 
     }, 
     { 
      id: "2", 
      desc: "Fillet O Fish", 
      unit_price: 4.50, 
      quantity: 3 
     }, 
     { 
      id: "3", 
      desc: "Icecreme", 
      unit_price: 0.5, 
      quantity: 10 
     } 

    ] 

} 

invoice2: Invoice; 


getTotal = function() { 

    var total = 0; 
    for (var i = 0; i < this.invoice.products.length; i++) 
    { 
     total += this.invoice.products[i].unit_price * this.invoice.products[i].quantity; 
    } 
    return total; 
} 


onSubmit() { 

    this.create().then(i => { 
     this.invoice2 = i; 
     console.log(this.invoice2); 
    }); 
} 
create(): Promise<Invoice> { 
    console.log("POST"); 
    let url = "/Invoice/Create"; 
    return this.http.post(url, this.invoice).toPromise() 
     .then(res => { return res.json() as Invoice }); 

} 

}; 

export class Invoice { 
customer: Customer; 
products: Item[]; 
} 

export class Customer { 
CustomerName: String; 
Address: String; 
Suburb: String; 
State: String; 
PostCode: String; 

} 

export class Item { 
id: String; 
desc: String; 
unit_price: Number; 
quantity: Number; 
} 

（cart.html）文件：

<form #f="ngForm" (ngSubmit)="onSubmit()"> 

<div class="invoice-wrap"> 

    <div class="invoice-header"> 

     <div class="container-fluid"> 

      <div class="row"> 

       <div class="col-xs-6 col-xxs-12"> 
        <div class="customer-details"> 

         <p><strong>Invoice To</strong></p> 
         <input type="text" [(ngModel)]="invoice.customer.CustomerName" name="CustomerName" /> 

         <span><strong>Address: </strong></span><br /> 

         <input type="text" [(ngModel)]="invoice.customer.Address" name="Address" /><br /> 
         <input type="text" [(ngModel)]="invoice.customer.Suburb" name="Suburb" /><br /> 
         <input type="text" [(ngModel)]="invoice.customer.State" name="State" /><br /> 
         <input type="text" [(ngModel)]="invoice.customer.PostCode" name="PostCode" /><br />       

        </div> 


       </div> 
       <div class="col-xs-6 col-xxs-12"> 
        <button type="submit" [disabled]="!f.valid">Submit</button> 
       </div> 

       <div class="clearfix"></div> 
      </div> 
     </div> 

    </div> 
</div> 



<div class="item-header-wrap"> 

    <div class="item-header hidden-xs"> 

     <div class="container-fluid"> 

      <div class="row"> 

       <div class="col-sm-2 col-xs-4"> 

        <p>Product</p> 

       </div> 
       <div class="col-sm-3 col-xs-8"> 
        <p>Description</p> 

       </div> 

       <div class="col-sm-2 col-xs-12"> 
        <p>Delivery</p> 

       </div> 

       <div class="col-sm-2 col-xs-12"> 
        <p>Click&amp;Collect</p> 


       </div> 

       <div class="col-sm-1 col-xs-6"> 
        <p>Unit Price</p> 


       </div> 

       <div class="col-sm-1 col-xs-6"> 
        <p>Quantity</p> 

       </div> 

       <div class="col-sm-1 col-xs-12"> 
        <p>Line Total</p> 

       </div> 



      </div> 
     </div> 
    </div> 
</div> 





<div class="item-wrap"> 

    <div class="item" *ngFor="let product of invoice.products"> 

     <div class="container-fluid"> 

      <div class="row"> 

       <div class="col-sm-2 col-xs-4"> 
        <div class="azure col"> 


         <img src="./images/item.jpg" class="item-img" /> 

        </div> 

       </div> 
       <div class="col-sm-3 col-xs-8"> 
        <div class="orange col"> 

         <input type="text" [(ngModel)]="product.desc" name="product.desc" value="" /> 


        </div> 

       </div> 

       <div class="col-sm-2 col-xs-12"> 
        <div class="azure col"> 

        </div> 

       </div> 

       <div class="col-sm-2 col-xs-12"> 
        <div class="click-and-collect col"> 


        </div> 


       </div> 

       <div class="col-sm-1 col-xs-6"> 
        <div class="red col"> 

         <input type="text" [(ngModel)]="product.unit_price" name="product.unit_price" value="" /> 

        </div> 


       </div> 

       <div class="col-sm-1 col-xs-6"> 
        <div class="col"> 
         <input type="text" [(ngModel)]="product.quantity" name="product.quantity" value="" /> 

        </div> 


       </div> 

       <div class="col-sm-1 col-xs-12"> 
        <div class="red col"> 
         <p>${{product.unit_price * product.quantity}}</p> 
        </div> 


       </div> 



      </div> 
     </div> 
    </div> 






</div> 

<div class="total"> 
    Total = {{getTotal()}} 
</div> 

我在浏览器中得到以下内容：我的模型被填充了对象数组中的最后一个元素。 客户发票对象的部分已正确绑定，但对象的产品数组未正确绑定。我做错了什么？我在谷歌搜索广泛，并尝试了各种方法，但似乎没有任何工作。请帮忙。

Answer 1

当创建ngFor环内的多个ngModel控制确保给每个控制的唯一名称：

你可以改变这样的

<div class="item" *ngFor="let product of invoice.products;let i=index"> 

每个输入字段中输入您的代码，您应该

改变

<input type="text" name="name-{{i}}" [(ngModel)]="your binding variable"> 

希望这会有帮助

Answer 2

你需要我们ËngFor这里，

<div class="item" *ngFor="let product of invoice.products;let i=index"> 
    <input type="text" name="name-{{i}}" [(ngModel)]="product.invoice.customer.Address"> 

Answer 3

你的问题是在这里：

​​

因为你的HTML代码是一个形式里面，你必须使用一个唯一的名每个元素（输入）。但你可能忘了使用字符串插值，因此你会得到如下： 所有元素指的简称相同的形式属性：product.desc 在名称中使用字符串插值将解决你的问题：

<input type="text" [(ngModel)]="product.desc" name="{{product.desc}}" value="" /> 

而且你应该在你使用ngModel的任何地方都这样做。 另外，正如另一个答案所建议的，您最好为该名称添加一个唯一标识符（例如使用' - {{i}}''索引）以避免与包含多个具有相同名称的项目的发票重复。