Angular2 - Two way databinding on each index of array

Question

In my project a product can have multiple price lists. Each price list can contain different price of that particular product. When i edit a product i want to fetch all the prices of that product according to their price list. I can successfully fetch the required data,display it and also(kind of) 2 way bind it in the template. I have tried to bind it in two different ways but still cannot correctly bind it. It seems that it only binds to the last index of array. I want to display the correct value in the input field. So that if user updates a price it can be updated. I want the same data to be displayed in the input fields as displayed in the table and bind it.You can understand more after looking at the image and code.

Image

Code

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>