angular - Angular2 - Two way databinding on each index of array -

in project product can have multiple price lists. each price list can contain different price of particular product. when edit product want fetch prices of product according price list. can fetch required data,display , also(kind of) 2 way bind in template. have tried bind in 2 different ways still cannot correctly bind it. seems binds last index of array. want display correct value in input field. if user updates price can updated. want same data displayed in input fields displayed in table , bind it.you can understand more after looking @ image , code.

image

code

addproductcomponent

import { component, oninit } '@angular/core'; import { router , activatedroute } '@angular/router'; import { http, headers , response , requestoptions } "@angular/http"; import {appservice} "../app.service"; import {productservice} "./product.service"; import {pricelistservice} "../price-list/price-list.service"; import {unitservice} "../shared/unit.service"; import {productcategoryservice} "../product-category/product-category.service"; import {authhttp} 'angular2-jwt'; import { observable } '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: = [];      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()     {              (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>