Событие onEditComplete не вызывается для функции PrimeNG Edit Cell. - PullRequest
Новая
       64

Событие onEditComplete не вызывается для функции PrimeNG Edit Cell.

0 голосов
/ 24 февраля 2020

Я использую таблицу PrimeNG. Я хочу сделать редактируемую ячейку функциональностью, поэтому я использую шаблон, используя onEditInit и событие onEditComplete. Это работает нормально. Но если я нажимаю на событие onEditInit ячейки редактирования первой строки, то я изменяю некоторый текст. Если я нажимаю на ячейку редактирования Второй строки, то снова вызывается событие onEditInit для редактируемой ячейки второй строки. Я не получил событие onEditComplete для отредактированной ячейки первого ряда. Как я могу получить событие onEditComplete для первой ячейки даже после нажатия на другую ячейку ??? 

<h3>Inline Row Editing and Adding</h3>
<p-table #dt [value]="cars" dataKey="vin" editMode="row" (onEditInit)="onRowEditInit($event)" (onEditComplete)="onRowEditSave($event)">
    <ng-template pTemplate="header">
        <tr>
            <th>Vin</th>
            <th>Year</th>
            <th>Brand</th>
            <th>Color</th>
            <th style="width:8em"></th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-editing="editing" let-ri="rowIndex">
        <tr [pEditableRow]="rowData">
            <td pEditableColumn>
              <p-cellEditor>
                <ng-template pTemplate="input">
                    <input pInputText type="text" [(ngModel)]="rowData.vin">
                </ng-template>
                <ng-template pTemplate="output">
                    {{rowData.vin}}
                </ng-template>
            </p-cellEditor>
            </td>
            <td pEditableColumn>
                <p-cellEditor>
                    <ng-template pTemplate="input">
                        <input pInputText type="text" [(ngModel)]="rowData.year">
                    </ng-template>
                    <ng-template pTemplate="output">
                        {{rowData.year}}
                    </ng-template>
                </p-cellEditor>
            </td>
            <td pEditableColumn>
              <p-cellEditor>
                <ng-template pTemplate="input">
                    <p-dropdown [options]="brands" [(ngModel)]="rowData.brand" placeholder="Select Make"
                    [style]="{'width':'100%'}"></p-dropdown>
                </ng-template>
                <ng-template pTemplate="output">
                    {{rowData.brand}}
                </ng-template>
            </p-cellEditor>
            </td>
            <td pEditableColumn>
                <p-cellEditor>
                    <ng-template pTemplate="input">
                        <input pInputText type="text" [(ngModel)]="rowData.color">
                    </ng-template>
                    <ng-template pTemplate="output">
                        {{rowData.color}}
                    </ng-template>
                </p-cellEditor>
            </td>
        </tr>
    </ng-template>
</p-table>
<br/>
<button pButton type="button"icon="pi pi-plus" class="ui-button-info" [label]="'Add'"
  pAddRow [table]="dt" [newRow]="newRow()"></button>


import { Component, OnInit } from "@angular/core";
import { SelectItem } from "primeng/components/common/selectitem";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  cars: Array<Car>;
  brands: SelectItem[];
  clonedCars: { [s: string]: Car } = {};

  ngOnInit(): void {
    this.cars = [
      { brand: "Audi", color: "Blue", vin: "123", year: "2006" },
      { brand: "Toyota", color: "Blue", vin: "345", year: "2012" },
      { brand: "Honda", color: "Blue", vin: "567", year: "2019" },
      { brand: "Honda", color: "Blue", vin: "890", year: "2008" }
    ].sort((car1, car2) => {
      if (car1.brand > car2.brand) {
        return 1;
      }

      if (car1.brand < car2.brand) {
        return -1;
      }

      return 0;
    });

    this.brands = [
      { label: "Audi", value: "Audi" },
      { label: "BMW", value: "BMW" },
      { label: "Fiat", value: "Fiat" },
      { label: "Ford", value: "Ford" },
      { label: "Honda", value: "Honda" },
      { label: "Jaguar", value: "Jaguar" },
      { label: "Mercedes", value: "Mercedes" },
      { label: "Renault", value: "Renault" },
      { label: "VW", value: "VW" },
      { label: "Volvo", value: "Volvo" }
    ];
  }

  onRowEditInit(car: Car) {
    debugger
    //this.clonedCars[car.vin] = { ...car };
  }

  onRowEditSave(car: Car) {
    debugger
    //delete this.clonedCars[car.vin];
  }

  onRowEditCancel(car: Car, index: number) {
    this.cars[index] = this.clonedCars[car.vin];
    delete this.clonedCars[car.vin];
  }

  newRow() {
    return { brand: '', color: '', vin: '', year: '' };
  }
}

export interface Car {
  vin: string;
  year: string;
  brand: string;
  color: string;
}
...