angular - Angular2 - 数组每个索引上的两种方式数据绑定

Question

在我的项目中，一个产品可以有多个价目表。每个价目表可以包含该特定产品的不同价格。当我编辑一个产品时，我想根据他们的价目表获取该产品的所有价格。我可以成功地获取所需的数据，显示它并且（某种）2方式将它绑定在模板中。我尝试以两种不同的方式绑定它，但仍然无法正确绑定它。它似乎只绑定到数组的最后一个索引。我想在输入字段中显示正确的值。因此，如果用户更新价格，它可以被更新。我希望在输入字段中显示与表格中显示的相同的数据并绑定它。您可以查看图像和代码后了解更多。

图片

代码

添加产品组件

import { Component, OnInit } from '@angular/core';
import { Router , ActivatedRoute } from '@angular/router';
import { Http, Headers , Response , RequestOptions } from "@angular/http";
import {AppService} from "../app.service";
import {ProductService} from "./product.service";
import {PriceListService} from "../price-list/price-list.service";
import {UnitService} from "../shared/unit.service";
import {ProductCategoryService} from "../product-category/product-category.service";
import {AuthHttp} from 'angular2-jwt';
import { Observable } from 'rxjs/Rx';
@Component({
    selector: 'add-product',
    templateUrl: 'add-product.component.html',
    styles: []
})
export class AddProductComponent implements OnInit
{
    product:any = {};
    productErrors = new Map<any,any>();
    productSuccess:boolean = false;

    priceListsDropDown:any;
    unitsDropDown:any = [];

    productCategoriesDropDown:any = [];

    productDiscounts:any = [];
    productPrices:any = [];
    myProduct: any = [];

    isLoading = false;

    constructor(public router:Router,
                public appService:AppService,
                private authHttp:AuthHttp,
                public productService:ProductService,
                public priceListService:PriceListService,
                public productCategoryService:ProductCategoryService,
                public unitService:UnitService,
                private activatedRoute:ActivatedRoute)
    {
    }

    ngOnInit()
    {
        this.product.productCategory = "null";
        this.product.unit = "null";
        this.product.discount = 0;
        let id = null;
        if (this.activatedRoute.snapshot.params['id'])
        {
            id = this.activatedRoute.snapshot.params['id'];
        }
        Observable.forkJoin(
            this.productCategoryService.getAll(),
            this.priceListService.getAll())
            .subscribe(
                success=>
                {

                    this.productCategoriesDropDown = success[0].data.productCategories;
                    this.priceListsDropDown = success[1].data.priceList;
                    if (id)
                    {
                        this.isLoading = true;
                        Observable.forkJoin(
                            this.productService.findById(id),
                            this.priceListService.getPricesByProduct(id))
                            .subscribe(
                                success =>
                                {
                                    this.product = success[0].data.product;
                                    this.priceListsDropDown = null;
                                    this.priceListsDropDown = success[1].data.price;
                                    this.fillPriceLists();
                                }
                            );
                    }
                }
            );
    }

    fillPriceLists()
    {

            for (let price  of this.priceListsDropDown)
            {
                this.myProduct.push({priceId : price.id ,
                    price : price.price ,
                    discount : price.discount ,
                    priceListId : price.priceList.id ,
                    priceListName : price.priceList.name});



                this.productPrices[price.priceList.id] = price.price;
                this.productDiscounts[price.priceList.id] = price.discount;
            }
    }

HTML

<form class="form-horizontal">
        <input
        [(ngModel)]="product.name"
        required
        type="text"
        class="form-control"
        name="productName"
        id="productName"
        placeholder="Enter Product Name">
    </div>
</div>
<div class="form-group">
    <label for="productCategory"> Category</label>
    <div class="col-sm-10">
        <select [(ngModel)]="product.productCategory"
        required
        class="form-control"
        name="productCategory"
        id="productCategory">
        <option [value]="null">Select Category</option>
        <option *ngFor="let category of productCategoriesDropDown" [ngValue]="category">
            {{ category.name }}
        </option>
    </select>
</div>
</div>
<div class="form-group">
    <label for="productBarcode"> Barcode</label>
    <div class="col-sm-10">
        <input [(ngModel)]="product.barcode"
        required
        type="text"
        class="form-control"
        name="productBarcode"
        id="productBarcode"
        placeholder="Enter Product Barcode">
    </div>
</div>
<label class="control-label">Price Lists</label>
<div class="form-group">
    <div class="box-body">
        <table class="table table-bordered table-striped table-hover">
            <thead>
                <tr>
                    <th>Sr #</th>
                    <th>Name</th>
                    <th>Unit Price</th>
                    <th>Discount</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let p of myProduct;let serial=index">
                    <td>{{serial+1}}</td>
                    <td>{{ p.priceListName }}</td>
                    <td>{{ p.price }}</td>
                    <td>{{ p.discount }}</td>
                    <td>
                        <input [(ngModel)]="productPrices[p.priceListId]" type="text"
                        name="priceListPrice">
                    </td>
                    <td>
                        <input [(ngModel)]="productDiscounts[p.priceListId]" type="text"
                        name="priceListDiscount">
                    </td>
                    <td>
                        <input [(ngModel)]="p.price" type="text"
                        name="priceListPrice">
                    </td>
                    <td>
                        <input [(ngModel)]="p.discount" type="text"
                        name="priceListDiscount">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
</form>