我正在尝试在Angular2中执行一些示例代码。 我有一个名为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);
}
});
}
答案 0 :(得分: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>