angular - Angular2 - 配列の各インデックスに対する双方向データバインディング

Question

私のプロジェクトでは、製品に複数の価格表を含めることができます。各価格表には、その特定の製品の異なる価格を含めることができます。製品を編集するとき、価格表に従ってその製品のすべての価格を取得したいと考えています。必要なデータを正常にフェッチして表示し、(一種の) 2 ウェイでテンプレートにバインドすることもできます。2 つの異なる方法でバインドしようとしましたが、まだ正しくバインドできません。配列の最後のインデックスにのみバインドしているようです。入力欄に正しい値を表示したい。ユーザーが価格を更新すると、更新できるようになります。テーブルに表示されているのと同じデータを入力フィールドに表示してバインドしたいのですが、画像とコードを見ていただくとより理解が深まります。

画像

コード

AddProductComponent

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>