微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

将项目添加到primeNg Table Angular 9.0时的相乘行

如何解决将项目添加到primeNg Table Angular 9.0时的相乘行

所以我有一个问题想要在表中添加一行,它应该只添加一行,但是相反,它添加了一行和另一个空项,如您在以下屏幕上看到的那样:

1-我输入了值:

enter image description here

2-我确认。 3-它显示了这一点:

enter image description here

在我的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 举报,一经查实,本站将立刻删除。