i have a button to add new row.and a textbox which filter the textbox value. how can i filter new product in each row?

Question

i used ion-input where it filters the textbox value.But whenever i add new row and select product, each row selects the same filter value(product).

Here is my Html Code

<table>
      <tr *ngFor="let list of lists; let i=index;">
            <td>{{i+1}}</td>
            <td>
            <div>
              <input type="text" name="filterText" [(ngModel)]="filtText" style="float:left;" (keypress)="isshow=true" (click)="isshow=true"/></div>
            <div style="border: 1px solid #a9a9a9;width:35px;height: 22px;float: left;text-align:center;border-left: 0px;padding: 4px;" (click)="isshow = !isshow">
              <ion-icon ios="ios-arrow-dropdown" md="md-arrow-dropdown"></ion-icon>
            </div>

            <div style="clear:both;float:left;border: 1px solid #a9a9a9;width:198px;height:88px;overflow:auto;border-top:0px;cursor:pointer" *ngIf="isshow">
              <ul>
                <li *ngFor="let list of prdList | filter:filtText" style="list-style:none" (click)="assignVal(list)">{{list.NAME}}</li>
              </ul>
            </div></td>
            <td><ion-input type="text" [(ngModel)]="lists[i].RATE" name="rate"></ion-input></td>
            <td><ion-input type="text" [(ngModel)]="lists[i].UNIT" name="unit" (blur)="calculateRowTotal(i)"></ion-input></td>
            <td><ion-input type="text" [(ngModel)]="lists[i].total" name="total"></ion-input></td>
          </tr>

        </table>
        <input type="button" value="Add New Row" (click)="addRow()" style="margin-top:5px"/>

Here is my .ts Code

ngOnInit()
 {
   this._customerList.getCustomerList().subscribe(data => {this.custList = data; console.log(data);});
   this._listProduct.listProduct().subscribe(data => {this.prdList = data;console.log(data); console.log(this.prdList[0].NAME);

   });
 }
  assignValue(value){
    this.filterText = value.partyname;
    // this.address    = value.address1;
    this.isShow     = false;
  }
  assignVal(value){
    this.filtText = value.NAME;
    // this.address    = value.address1;
    this.isshow     = false;


  }
  addRow(){
    this.lists.push({'name':'0','rate':'0','unit':'0','total':''});
  }
  calculateRowTotal(i: number) {
    this.lists[i].total = +this.lists[i].UNIT* +this.lists[i].RATE
  }
  addNewCust(){
    this.navCtrl.push(CustomermasterPage);
  }

enter image description here As i selected "test" in first row, second row also selects "test".

Answer 1

Sometimes push in array will not be updated via binding. reinitiate the list again after push. Please refer the working version too

addRow(){
    this.lists.push({'name':'0','rate':'0','unit':'0','total':''});
this.lists = this.lists.slice();
  }