如何使用angular2更改ngmodel中的动态变量?

时间:2018-05-19 07:11:38

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

的index.html

  <button class="btn btn-success" type="button" (click)="addFieldValue()">Add</button>
          <div style="padding-top:3%">
            <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 category" [value]="user.id">{{user.pro_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]="'quan' + i" [(ngModel)]="quan" [name]="'quan' + i" type="text" (change)="quanrate(qua.value)" ngModel
                      [(ngModel)]="fieldArray[i].quan">
                  </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>
          </div>

component.ts

  //Add button function in table
  addFieldValue() {
    this.fieldArray.push(1);
    this.fieldArray[this.fieldArray.length - 1] = { "pname": "", "ptype": "", "descri": "", "quan": "", "rate": "", "amount": "" };
    console.log(this.fieldArray)
  }

 productname(id)
  {
    this.id1 = 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
       console.log("quantity "+this.quan)
     }
   }
  }

我怀疑如何更改ngmodel( [(ngModel)]="descri")中的动态变量。我尝试但显示错误。我在component.ts(this.descri)中获取值,然后分配给(index.html((ngModel)]="descri"))。我想要一次循环可以运行component.ts值和index.html值可以改变,但它的两个值相同

............................................... .................................................. ................................

0 个答案:

没有答案