Angular 2 模型绑定（对象数组）

Question

我是 Angular2 的新手...我的问题很简单：我想绑定一个 Object 数组，如下所示：

我有以下组件（app.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

你的问题在这里：

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

由于您的 HTML 代码位于表单中，因此您必须为每个元素（输入）使用唯一的 名称。但是您可能忘记使用字符串插值，因此您会得到以下信息： 所有元素都引用相同的表单属性，简称为：product.desc 在名称中使用字符串插值将解决您的问题：

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

您应该在使用ngModel 的任何地方执行此操作。 此外，正如另一个答案所暗示的那样，您最好在名称中添加一个唯一标识符（例如使用带有“-{{i}}”的索引），以避免与包含多个同名项目的发票重复。