Question

我使用ion-input来过滤文本框值。但每当我添加新行并选择产品时，每一行都会选择相同的过滤值（产品）。

这是我的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 当我在第一行选择“test”时，第二行也选择“test”。

Answer 1

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

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

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

1 个答案: