Getting the wrong item using the directive in the Primeng p-table

I am using the new primeng p-table component. My first column is frozen and contains three buttons on each row. Other columns are dynamically generated and plain text outputs. Primeng generates a header, body, and frozen column in its own html table. If I press a button in a frozen column, I want to get the whole row using the directive #tableCol(not sure if there is a directive) of my table and select it, but I get only the frozen column row. Isolation occurs in a method rowDeletionMark(tableCol).

How to get a row in the "main" table where the actual data / rows are?

My primeng table:

<p-table #dt [columns]="header" [value]="data" [resizableColumns]="true" [frozenColumns]="frozenCols" [paginator]="true"
    [rows]="10" [rowsPerPageOptions]="[10,20,30]" sortMode="multiple" [reorderableColumns]="true" class="ptable row-cancel"
    [scrollable]="true" frozenWidth="150px">
    <ng-template pTemplate="colgroup" let-columns>
      <colgroup>
        <col *ngFor="let col of columns" style="width:200px">
      </colgroup>
    </ng-template>
    <ng-template pTemplate="header" let-columns>
      <tr>
        <th *ngFor="let col of columns" style="width:150px;font-size:13px" pResizableColumn pReorderableColumn 
          [pSortableColumn]="col.field !== 'ACTION' ? col.field : null">
          {{col.field}}
        </th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns" let-rowIndex="rowIndex">
      <tr>
        <td #tableCol *ngFor="let col of columns" height="48" style="width:150px;padding:0 5px 0 5px;line-height: 1;" [ngStyle]="getRowMarking(rowData)"
          pEditableColumn>
          <div *ngIf="col.field === 'ACTION'">
            <button pButton type="button" class="row-btn" icon="fa fa-fw fa-save"></button>
            <button pButton type="button" class="row-btn ui-button-danger" icon="fa fa-fw fa-eraser" (click)="rowDeletionMark(tableCol)"></button>
            <button pButton type="button" class="row-btn ui-button-info" icon="far fa-clock-o" (click)="showRowHistory(rowData)"></button>
          </div>
          <div *ngIf="col.editable && col.field !== 'ACTION'">
            <p-cellEditor>
              <ng-template pTemplate="input">
                <input type="text" [(ngModel)]="data[col.field]">
              </ng-template>
              <ng-template pTemplate="output">
                {{rowData[col.field]}}
              </ng-template>
            </p-cellEditor>
          </div>
          <div *ngIf="!col.editable">
            {{rowData[col.field]}}
          </div>
        </td>
      </tr>
    </ng-template>
  </p-table>

extraction method:

rowDeletionMark(tableCol) {
    tableCol.className += ' canceled';
  }
+4
source share

Source: https://habr.com/ru/post/1694488/


All Articles