Как связать значение с текстовым полем с помощью * ngДля локальной переменной в angular2

Question

Я пытаюсь выполнить некоторый пример кода в Angular2. У меня есть кнопка ADD. При нажатии на кнопку ADD будет добавлена ​​новая строка таблицы с набором элементов управления, таких как текстовое поле, выбор и т. Д. Как только я заполнил эти данные, тогда, если я снова нажму кнопку ADD, будет добавлена ​​новая строка, но она будет заполнена ранее детали будут очищены (пустые). Я хочу, чтобы всякий раз, когда я нажимаю кнопку ADD, нужно добавить новую строку, но ранее заполненные значения не должны быть удалены.

Вот мой пример кода:

1. component.html

<table td-data-table [class.md-selectable]="selectable"> 
    <tr td-data-table-row *ngFor="let account of voucher.accountList;let i = index;trackBy:i;"> 
     <td td-data-table-cell> 

      <md2-select [(ngModel)]="account.account" (change)="selectedAccount($event)" placeholder="Select account" name="account"> 
       <md2-option *ngFor=" let account of accounts" [value]="account.account" >{{account.name}}</md2-option> 
      </md2-select>     
     </td> 
     <td td-data-table-cell> 

      <md-input flex placeholder="description" type="text" maxlength="50" name="description" #description="ngModel" 
          [(ngModel)]="account.description" >    
      </md-input>     
     </td> 
     <td td-data-table-cell> 

      <md-input flex placeholder="debit" type="text" maxlength="50" name="debit" #debit="ngModel" 
          [(ngModel)]="account.debit" >    
      </md-input> 
     </td> 
     <td td-data-table-cell> 

      <md-input #creditElement flex placeholder="credit" type="text" maxlength="50" name="credit" #credit="ngModel" 
          [(ngModel)]="account.credit" >    
      </md-input> 
     </td> 
     <td td-data-table-cell> 

      <md2-select [(ngModel)]="account.tax" (change)="selectedTax($event)" placeholder="Select tax" name="tax"> 
       <md2-option *ngFor="let tax of taxList" [value]="tax.value" >{{tax.display}}</md2-option> 
      </md2-select> 
     </td> 
     <td td-data-table-cell> 

      <button md-mini-fab color="primary" (click)="removerow(account)"> 
       <md-icon color="#6b9bea">close</md-icon> 
      </button> 
     </td> 
     <td td-data-table-cell> 

      <button md-mini-fab color="primary" (click)="addrow()" *ngIf="i==(voucher.accountList.length-1)"> 
       <md-icon >add</md-icon> 
      </button>     
     </td> 
    </tr> 
</table> 

Component.ts

//sample model 

    voucher={ 
    referenceNo:"", 
    date:"", 
    narration:"", 
    accountList:this.transaction, 
    notes:"" 
    }; 

transaction=[{ 
    id:null,account:null,description:"",debit:"",credit:"",tax:"" 
    }] 

    addrow(){ 

    this.voucher.accountList.push({id:"",account:"",description:"",debit:"",credit:"",tax:""}); 

    } 

    removerow(row){ 

    this.voucher.accountList.forEach(x=> 
    { 
     if(x==row){ 
      var index= this.voucher.accountList.indexOf(row) 
     this.voucher.accountList.splice(index,1); 
     } 
    }); 
    } 

Answer 1

При создании нескольких элементов управления ngModel внутри цикла ngFor убедитесь, чтобы дать каждому управляющему уникальное имя:

как

<table td-data-table [class.md-selectable]="selectable"> 
       <tr td-data-table-row *ngFor="let account of voucher.accountList;let i = index;trackBy:i;"> 
       <td td-data-table-cell> 

        <md2-select [(ngModel)]="account.account" (change)="selectedAccount($event)" placeholder="Select account" name="account-{{i}}"> 
         <md2-option *ngFor=" let account of accounts" [value]="account.account" >{{account.name}}</md2-option> 
        </md2-select>     
       </td> 
       <td td-data-table-cell> 

        <md-input flex placeholder="description" type="text" maxlength="50" name="description-{{i}}" #description="ngModel" 
         [(ngModel)]="account.description" >    
        </md-input>     
       </td> 
       <td td-data-table-cell> 

        <md-input flex placeholder="debit" type="text" maxlength="50" name="debit-{{i}}" #debit="ngModel" 
         [(ngModel)]="account.debit" >    
        </md-input> 
       </td> 
       <td td-data-table-cell> 

        <md-input #creditElement flex placeholder="credit" type="text" maxlength="50" name="credit-{{i}}" #credit="ngModel" 
         [(ngModel)]="account.credit" >    
        </md-input> 
       </td> 
       <td td-data-table-cell> 

        <md2-select [(ngModel)]="account.tax" (change)="selectedTax($event)" placeholder="Select tax" name="tax-{{i}}"> 
         <md2-option *ngFor="let tax of taxList" [value]="tax.value" >{{tax.display}}</md2-option> 
        </md2-select> 
       </td> 
       <td td-data-table-cell> 

         <button md-mini-fab color="primary" (click)="removerow(account)"> 
         <md-icon color="#6b9bea">close</md-icon> 
         </button> 
       </td> 
       <td td-data-table-cell> 

        <button md-mini-fab color="primary" (click)="addrow()" *ngIf="i==(voucher.accountList.length-1)"> 
        <md-icon >add</md-icon> 
        </button>     
       </td> 
       </tr> 
      </table>