Angular 2模型绑定(对象数组) [英] Angular 2 Model binding (array of object)
本文介绍了Angular 2模型绑定(对象数组)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是Angular2的新手，我的问题很简单:我想像下面这样绑定一个Object数组:
I am new to Angular2...my problem is simple enough:I want to bind a array of Object like the following:
我具有以下组件(app.ts)和视图(cart.html):
I have the following component(app.ts) and view (cart.html):
(app.ts)文件:
(app.ts) file:
@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)文件:
(cart.html) file:
<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&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>
我在浏览器中得到以下内容:在该模型中，对象数组中的最后一个元素被填充. 发票对象的客户部分已正确绑定，但对象的产品数组未正确绑定.我做错了什么?我已经在Google中进行了广泛搜索，并尝试了各种方法，但似乎没有任何效果.请帮忙.
I get the following in the browser: where my model is populated with the last element from the object array. Customer Part of the invoice object is binding properly but the products array of object is not binding properly. What i am doing wrong? i have searched extensively in google and tried various methods but nothing seemed to work. Please help.
推荐答案
在ngFor循环内创建多个ngModel控件时，请确保为每个控件赋予唯一的名称:
When creating multiple ngModel controls inside ngFor loop make sure to give each control unique name:
您可以像这样更改代码
<div class="item" *ngFor="let product of invoice.products;let i=index">
以及您应将每个输入字段更改为
and each input field you should change as
<input type="text" name="name-{{i}}" [(ngModel)]="your binding variable">
希望这会有所帮助
这篇关于Angular 2模型绑定(对象数组)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
