我有一个添加新行的按钮。还有一个过滤文本框值的文本框。我如何过滤每一行中的新产品？答案

【问题标题】：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?我有一个添加新行的按钮。还有一个过滤文本框值的文本框。我如何过滤每一行中的新产品？
【发布时间】：2018-05-02 16:21:31
【问题描述】：

我在过滤文本框值时使用了离子输入。但每当我添加新行并选择产品时，每一行都会选择相同的过滤器值（产品）。

这是我的 HTML 代码

<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"/>

这是我的 .ts 代码

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 当我在第一行选择“测试”时，第二行也选择了“测试”。

【问题讨论】：

标签： angular ionic2

【解决方案1】：

有时推入数组不会通过绑定更新。推送后再次重新启动列表。 Please refer the working version too

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

【讨论】：