1
私はAngular2に新しいですが...私の問題は十分に簡単です：角度2モデルバインディング（オブジェクトの配列）
私は次のコンポーネント（アプリを持っている：私は次のようにオブジェクトの配列をバインドします。 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&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で広範に検索し、さまざまな方法を試しましたが、何も動作していないようです。助けてください。
入力フィールドからvalue = ""を削除して一度だけ試してください –
value = ""が役に立たなかった。 – Choudhury