问题描述
所以我有一个问题想要在表中添加一行，它应该只添加一行，但是相反，它添加了一行和另一个空项，如您在以下屏幕上看到的那样：
1-我输入了值：
2-我确认。 3-它显示了这一点：
在我的component.html中，我具有负责表视图和添加/删除的部分：
{{supplier.bankAccount | json}}
<div class="row">
<div class="col-sm-12">
<div class="table-background" header="Bank Accounts">
<p-table [responsive]="true" class="header-table" #tableBank
[value]="supplier.bankAccount" dataKey="id" editMode="row" [paginator]="true"
[(rows)]="rowsNumber" [showCurrentPageReport]="true"
[rowsPerPageOptions]="rowsPerPage" currentPageReportTemplate="Showing {{ '{first}' }}
to {{ '{last}' }} of {{ '{totalRecords}' }} entries"
i18n-currentPageReportTemplate="
@@account-list.currentPageReportTemplate"
(onPage)="pageIndex = $event.first / $event.rows + 1">
<!-- Header & Filter -->
<ng-template pTemplate="header">
<!-- Header -->
<tr>
<th [pSortableColumn]="'banckAccountNumber'">
<p-header i18n="@@supplier-crud.rib">RIB</p-header>
<i-sort-icon fieldName="banckAccountNumber"></i-sort-icon>
</th>
<th [pSortableColumn]="'bank'">
<p-header i18n="@@supplier-crud.bank">Bank</p-header>
<i-sort-icon fieldName="bank"></i-sort-icon>
</th>
<th [pSortableColumn]="'city'">
<p-header i18n="@@supplier-crud.city">City</p-header>
<i-sort-icon fieldName="city"></i-sort-icon>
</th>
<th [pSortableColumn]="'principal'">
<p-header i18n="@@supplier-crud.principal">Principal</p-header>
<i-sort-icon fieldName="principal"></i-sort-icon>
</th>
<!-- Actions -->
<th class="th-name-background-color th-width-action"
i18n="@@global.action">
Actions
</th>
</tr>
</ng-template>
<!-- Body -->
<ng-template pTemplate="body" let-bankAccount let-editing="editing"
let-rowIndex="rowIndex">
<tr [pEditableRow]="bankAccount">
<td [ngClass]="{ 'table-tr-margin': !bankAccount.id}">
<p-cellEditor>
<ng-template pTemplate="input">
<input pInputNumber id="banckAccountNumber"
name="banckAccountNumber" placeholder="required"
i18n-placeholder="@@error-messages.required"
#banckAccountNumber="ngModel"
[(ngModel)]="bankAccount.banckAccountNumber"
autoComplete="off" required maxlength="50" [ngClass]="{
invalid: !banckAccountNumber.valid,valid: banckAccountNumber.valid
}" />
</ng-template>
<ng-template pTemplate="output">
{{ bankAccount.banckAccountNumber }}
</ng-template>
</p-cellEditor>
</td>
<td [ngClass]="{ 'table-tr-margin': !bankAccount.id }">
<p-dropdown [class]="{'invalidInput':!bank.valid}"
class="dropdown-form" [options]="selectValidAccounts"
name="bank" #bank="ngModel" [(ngModel)]="bankAccount.bank"
[filter]="true">
</p-dropdown>
</td>
<td [ngClass]="{ 'table-tr-margin': !bankAccount.id }">
<p-dropdown [class]="{'invalidInput':!city.valid}"
class="dropdown-form" [options]="selectValidCities" name="city"
#city="ngModel" [(ngModel)]="bankAccount.city" [filter]="true">
</p-dropdown>
</td>
<td [ngClass]="{ 'table-tr-margin': !bankAccount.id }">
<p-inputSwitch [(ngModel)]="bankAccount.defaultAccount">
</p-inputSwitch>
</td>
<!-- Actions -->
<td style="text-align: center;">
<!-- create & update operations buttons -->
<div *ngIf="editing">
<!-- Create -->
<a type="button" *ngIf="!bankAccount.id"
(click)="createBankAccount(bankAccount,rowIndex)">
<i class="pi pi-check pi-check-disabled"></i>
</a>
<!-- Cancel -->
<a pCancelEditableRow type="button"
(click)="cancelEditBankAccount(bankAccount,rowIndex)">
<i class="pi pi-times pi-pi-times-color"></i>
</a>
</div>
<!-- delete buttons -->
<div *ngIf="!editing">
<i type="button" class="icon-delete material-icons"
(click)="deleteBankAccount(bankAccount)">delete_outline</i>
</div>
</td>
</tr>
</ng-template>
</p-table>
</div>
</div>
</div>
在我的component.ts中，我具有创建，删除和添加行等功能。
cancelEditBankAccount(bankAccount: supplierBankAccount,index: number) {
if (this.creatingNewBankAccount && !bankAccount.id) {
this.supplier.bankAccount = this.supplier.bankAccount.filter((c) => c.id !== bankAccount.id);
this.creatingNewBankAccount = false;
} else {
this.supplier.bankAccount[index] = this.clonedBankAccount[bankAccount.id];
this.updatingLine = false;
}
this.tableBank.cancelRowEdit(bankAccount);
}
deleteBankAccount(bankAccount: supplierBankAccount) {
this.supplier.bankAccount = this.supplier.bankAccount.filter((c) => c.id !== bankAccount.id);
}
createBankAccount(bankAccount: supplierBankAccount,index: number) {
const newBankAccount = new supplierBankAccount();
this.supplier.bankAccount.push(bankAccount);
this.supplier.bankAccount[index] = newBankAccount;
this.tableBank.cancelRowEdit(newBankAccount);
this.creatingNewBankAccount = false;
}
addBankAccountLine() {
if (this.creatingNewBankAccount || this.updatingLine) {
return;
}
const newBankAccount = new supplierBankAccount();
//this.supplier.bankAccount = [...this.supplier.bankAccount];
const pageFull =
this.pageIndex * this.rowsNumber <= this.tableBank.value.length;
this.tableBank.value.push(newBankAccount);
this.supplier.bankAccount = [...this.supplier.bankAccount];
this.tableBank.initRowEdit(newBankAccount);
this.creatingNewBankAccount = true;
}
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）