如何在angular2中重置模型?

时间:2018-05-17 10:02:12

标签: angular angular2-routing angular2-template angular2-forms angular2-directives

    <table class="table table-bordered" #tableEstimate style="padding-top:5%">
                  <thead>
                    <tr>
                      <th>Product Type</th>
                      <th>Product Name</th>
                      <th>Description</th>
                      <th style="width:15%">Quantity</th>
                      <th style="width:15%">Rate</th>
                      <th style="width:15%">Amount</th>
                      <th>Tax</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr *ngFor="let field of fieldArray; let i = index">
                      <td>
                        <select class="form-control" #type [id]="'product_name' + i" [name]="'product_name' + i" (change)="productype(type.value)" [(ngModel)]="fieldArray[i].pname">
                          <option>Select</option>
                          <option (click)="businesstype" *ngFor="let user of pro" [value]="user.type">{{user.type}}</option>
                        </select>
                      </td>
                      <td>
                        <select class="form-control" #name [id]="'product_type' + i" [name]="'product_type' + i" (change)="productname(name.value)" [(ngModel)]="fieldArray[i].ptype">
                          <option>Select</option>
                          <option (click)="businesstype" *ngFor="let user of all" [value]="user.id">{{user.name}}</option>
                        </select>
                      </td>

                      <td>
                        <input class="form-control" #des [id]="'product_description' + i" [(ngModel)]="descri"  [name]="'productdescription' + i" type="text" 
                          ngModel [(ngModel)]="fieldArray[i].descri">
                      </td>
                      <td>
                        <input class="form-control" #qua [id]="'quantity' + i" [(ngModel)]="quan" [name]="'quantity' + i" type="text" (input)="qutity(qua.value)"
                          ngModel [(ngModel)]="fieldArray[i].qty">
                      </td>
                      <td>
                        <input class="form-control" #Rate [id]="'rate' + i" [(ngModel)]="rate" [name]="'rate' + i" type="text" (change)="quanrate(Rate.value)" ngModel
                          [(ngModel)]="fieldArray[i].rate">
                      </td>
                      <td>
                        <input class="form-control" [id]="'amount' + i" [name]="'amount' + i" type="text" [(ngModel)]="amount" ngModel [(ngModel)]="fieldArray[i].amount">
                      </td>
                      <td>
                        <input type="checkbox" [checked]="false" (change)="updateAddrs($event)">
                      </td>
                    </tr>
                  </tbody>
                </table>


**component.ts**
//Add button function in table
 addFieldValue() {
    this.fieldArray.push(1);
    this.fieldArray[this.fieldArray.length - 1] = { "pname": "", "ptype": "", "descri": "", "qty": "", "rate": "", "amount": "" };
  }
productype(event)
  {
     this.category = []
    this.service.productname_desc().subscribe(response =>
      {
        this.all = response
        var json = JSON.stringify(this.all)
        for(let i=0;i<this.all.length;i++)
        {
          var json1 = this.all[i]
          if(event == json1['category'])
          {
            this.category.push(json1)
          }
        }
      },
      error => console.log(error));

  }
  productname(id)
  {
   for(let i=0;i<this.all.length;i++)
   {
     var json2 = this.all[i]
     if(id == json2['id'])
     {
       this.descri = json2['description']
       this.quan = json2['quantity']
       this.rate = json2['rate']
       this.amount = this.quan*this.rate
     }
   }
  }

我有一个疑问。我正在使用ngmodel逐行自动填充值。我运行代码成功获取第一行中的所有数据。但第二行也填充值。然后如何重置ngmodel .I在第一个函数表循环方法中添加component.ts.in第二个方法获取db值并使用ngmodel在html中赋值

0 个答案:

没有答案