如何使用 angular2 中的 *ngFor 局部变量将值绑定到文本框答案

【问题标题】：How to bind a value to a textbox using *ngFor local variable in angular2如何使用 angular2 中的 *ngFor 局部变量将值绑定到文本框
【发布时间】：2017-01-20 11:11:24
【问题描述】：

我正在尝试在 Angular2 中执行一些示例代码。我有一个名为 ADD 的按钮。单击添加按钮时，将添加一个新的表格行，其中包含一组控件，如文本框、选择等。一旦我填写了这些详细信息，然后，如果我再次单击添加按钮，将添加一个新行，但之前填写的详细信息将被清除（空）。我想要的是，每当我点击添加按钮时，应该添加一个新行，但不应该清除以前填充的值。

这是我的示例代码：

1.组件.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);
       }
     });
    }

【问题讨论】：

其中 dataSourceList 是组件中数组类型的属性，它将为您提供名称列表，并在 ngFor 循环中动态创建文本框

标签： angular2-forms

【解决方案1】：

在 ngFor 循环中创建多个 ngModel 控件时，请确保为每个控件指定唯一名称：

喜欢

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

【讨论】：