Получение выбранной строки таблицы в Primeng

Question

Я использую функцию редактирования ячеек таблицы. Все изменения в ячейках правильно влияют на данные. Это нормально.

Но я хочу выбрать выбранную строку, ячейка которой изменена. Я могу обновить свою базу данных всеми записями таблиц, но это не лучший способ сделать это.

Я не могу взять выбранную строку с выбором таблицы. Когда я пытаюсь получить selectedRow, он производит undefined, а также onSelectionChange (событие) вообще не запускается.

Как я могу получить выбранную строку та, какая ячейка строки была отредактирована. Вкратце я хочу получить эту выбранную строку, а затем отправить ее в свой веб-сервис, затем обновить мою таблицу db, а затем снова получить эту таблицу. Моя точка зрения только на это. но не работает

Согласно разделу «Редактирование ячеек» в документации :

Если вам требуются отредактированные данные строки или выбранное поле в onEditInit, onEditComplete, и события onEditCancel, привяжите данные строки к директиве pEditableColumn, а поле - к директиве pEditableColumnField.

My html:

<p-table #dt [value]="tasks" selectionMode="single" dataKey="id" [(selection)]="selectedRecord" styleClass="ui-table-tasks" [rowHover]="true" [rows]="10" [showCurrentPageReport]="true" [rowsPerPageOptions]="[10,25,50]" [paginator]="true" currentPageReportTemplate="{{'toplam' | translate}} {totalRecords} {{'kayit' | translate}}{{'tan' | translate}}   {first} {{'ile' | translate}} {last} {{'arasindaki' | translate}} {{'kayitlar' | translate}} {{'gosteriliyor' | translate}}"
    [filterDelay]="0" [globalFilterFields]="['taskName','taskStartTime','taskEndTime','status']" (onEditComplete)="onEditComplete()" (onSelectionChange)="onSelectionChange($event.value)">
    <ng-template pTemplate="caption">

        {{'gorevler' | translate}}


        <div class="ui-table-globalfilter-container" style="float: left;display: contents;">
            <input style="margin-left: 15px;" pInputText type="text" (input)="dt.filterGlobal($event.target.value, 'contains')" [placeholder]="'arama' | translate" />
        </div>
        <div class="ui-table-globalfilter-container">
            <button type="button" pButton icon="pi pi-file-excel" iconPos="left" label="EXCEL" (click)="exportExcel()" style="margin-right: 0.5em;" class="ui-button-success"></button>
        </div>
        <div class="ui-table-globalfilter-container" style="margin-right: 10px;">
            <button type="button" pButton icon="pi pi-file-pdf" iconPos="left" label="PDF" (click)="exportPdf()" class="ui-button-warning"></button>
        </div>
        <div class="ui-table-globalfilter-container" style="margin-right: 10px;">
            <p-button [label]="'sil' | translate" icon="pi pi-trash" (click)="deleteTask()" [disabled]="!selectedRecord || !selectedRecord[0]"></p-button>
        </div>
        <div class="ui-table-globalfilter-container" style="margin-right: 10px;">
            <p-button [label]="'ekle' | translate" icon="pi pi-plus" (click)="displayAddDialog=true"></p-button>
        </div>
    </ng-template>
    <ng-template pTemplate="header">
        <tr>
            <th></th>
            <th pSortableColumn="taskName">{{'isim' | translate}}

                <p-sortIcon field="taskName"></p-sortIcon>
            </th>
            <th pSortableColumn="taskStartTime">{{'baslangictarihi' | translate}}

                <p-sortIcon field="taskStartTime"></p-sortIcon>
            </th>
            <th pSortableColumn="taskEndTime">{{'bitistarihi' | translate}}

                <p-sortIcon field="taskEndTime"></p-sortIcon>
            </th>
            <th pSortableColumn="status">{{'durum' | translate}}

                <p-sortIcon field="status"></p-sortIcon>
            </th>
        </tr>
        <tr>
            <th>
                <!-- <p-tableHeaderCheckbox disabled="true"></p-tableHeaderCheckbox> -->
            </th>
            <th>
                <input pInputText type="text" (input)="dt.filter($event.target.value, 'taskName', 'startsWith')" [placeholder]="'isimilearama' | translate" class="ui-column-filter">
                </th>
                <th>
                    <p-calendar (onSelect)="onDateSelect($event)" (onClearClick)="dt.filter('', 'taskStartTime', 'equals')" [showButtonBar]="true" styleClass="ui-column-filter" [placeholder]="'baslangictarihi' | translate" [readonlyInput]="true" dateFormat="yy-mm-dd"></p-calendar>
                </th>
                <th>
                    <p-calendar (onSelect)="onDateSelect($event)" (onClearClick)="dt.filter('', 'taskEndTime', 'equals')" [showButtonBar]="true" styleClass="ui-column-filter" [placeholder]="'bitistarihi' | translate" [readonlyInput]="true" dateFormat="yy-mm-dd"></p-calendar>
                </th>
                <th>
                    <p-dropdown [options]="statuses" (onChange)="dt.filter($event.value, 'status', 'equals')" styleClass="ui-column-filter" [placeholder]="'durumseciniz' | translate" [showClear]="true">
                        <ng-template let-option pTemplate="item">
                            <span [class]="'task-badge status-' + option.value">{{option.label | translate}}</span>
                        </ng-template>
                    </p-dropdown>
                </th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-task>
            <tr class="ui-selectable-row">
                <!-- <td><p-checkbox [value]="task" (click)="onClick()" (onChange)="onChange()" [(ngModel)]="selectedRecord" name="group" ngDefaultControl></p-checkbox></td>-->
                <td pEditableColumn>
                    <p-cellEditor>
                        <ng-template pTemplate="input">
                            <input pInputText type="text" [(ngModel)]="task.taskName">
                            </ng-template>
                            <ng-template pTemplate="output">
                        {{task.taskName}}
                    </ng-template>
                        </p-cellEditor>
                    </td>
                    <td pEditableColumn>
                        <p-cellEditor>
                            <ng-template pTemplate="input">
                                <input pInputText type="text" [(ngModel)]="task.taskStartTime">
                                </ng-template>
                                <ng-template pTemplate="output">
                        {{task.taskStartTime}}
                    </ng-template>
                            </p-cellEditor>
                        </td>
                        <td pEditableColumn>
                            <p-cellEditor>
                                <ng-template pTemplate="input">
                                    <input pInputText type="text" [(ngModel)]="task.taskEndTime">
                                    </ng-template>
                                    <ng-template pTemplate="output">
                        {{task.taskEndTime}}
                    </ng-template>
                                </p-cellEditor>
                            </td>
                            <td>
                                <span class="ui-column-title">{{'durum' | translate}}</span>
                                <span [class]="'task-badge status-' + task.status">{{task.status == true ? ('yapilmis' | translate) : ('yapilmamis' | translate)}} </span>
                            </td>
                        </tr>
                    </ng-template>
                </p-table>

My ts file:

import { Component, OnInit, ViewChild } from '@angular/core';
import { Table, TableCheckbox } from 'primeng/table/table';
import { TranslatePipe } from 'src/app/pipelar/translate.pipe';
import { HttpcagrilariService } from 'src/app/servisler/httpcagrilari.service';
import { MessageService } from 'primeng/api';

@Component({
  selector: 'app-gorevler',
  templateUrl: './gorevler.component.html',
  styleUrls: ['./gorevler.component.scss'],
  providers: [TranslatePipe, MessageService]
})

export class GorevlerComponent implements OnInit {

  tasks: any = [];
  newTask: any = {};
  loading = true;
  statuses: any[];
  @ViewChild('dt') table: Table;
  exportColumns: any[];
  selectedRecord: any = {};
  displayAddDialog: boolean;


  constructor(private translatePipe: TranslatePipe, private httpService: HttpcagrilariService,
    private messageService: MessageService) {

  }

  ngOnInit(): void {
    this.httpService.getTasks().subscribe(
      (response) => {
        this.tasks = response;
        this.tasks.forEach(function (task) {
          task.status = task.taskEndTime != null;
        });
      },
      (error) => {
        console.log(error);
      }
    );

    this.statuses = [
      { label: this.translatePipe.transform('yapilmamis'), value: this.translatePipe.transform('yapilmamis') },
      { label: this.translatePipe.transform('yapilmis'), value: this.translatePipe.transform('yapilmis') },
    ];
  }

  onEditComplete() {//if cell changed i have to update changes to db
    console.log(this.tasks);
  }

  onClick() {
    console.log(this.selectedRecord);//this returns undefined
  }

  onChange() {//checkbox sadece 1 tane seçilmesi için
    const choosen = this.selectedRecord[this.selectedRecord.length - 1];
    this.selectedRecord.length = 0;
    this.selectedRecord.push(choosen);
  }

  onSelectionChange(event) {
    console.log("onSelectionChange");
    if (event.value.length === 1) {
      this.selectedRecord = event.value[0];
    }
    else {
      event.value = [this.selectedRecord];
    }
  }

}