ngx-datatable - пользовательские столбцы с кнопками действий

Question

У меня есть таблица ( ngx-datatable ), в которой я хочу определить столбец «действий», в который затем будут помещаться кнопки для операций CRUD.

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

Вот мой шаблон:

...
<div class="col-12">
  <ngx-datatable
    #table
    class="material"
    [rowHeight]="'auto'"
    [columns]="columns"
    [columnMode]="'force'"
    [headerHeight]="50"
    [footerHeight]="50"
    [limit]="10"
    [rows]="cars?.content"
    [selected]="selected"
    [selectionType]="'multi'">
  </ngx-datatable>
</div>
...

Вот мой пользовательский шаблон с кнопками:

<ng-template #buttonsTemplate let-row="row" let-value="value" let-button="column.actions">
  <button class="btn btn-transparent" (click)='onSelect($event)'><i class="rb-ic rb-ic-add-frame"></i></button>
  <button class="btn bt n-transparent" (click)='onSelect($event)><i class="rb-ic rb-ic-abort-frame"></i></button>
  <button class="btn btn-transparent" (click)='onSelect($event)><i class="rb-ic rb-ic-reset"></i></button>
  <button class="btn btn-transparent" (click)='onSelect($event)><i class="rb-ic rb-ic-agility"></i></button>
</ng-template>

Мой компонент (файл .ts) имеет следующую структуру:

export class MyComponent implements OnInit, OnDestroy {
    @ViewChild('buttonsTemplate') buttonsTemplate: TemplateRef<any>;
    columns = [];

    ngOnInit() {
      this.columns = [
      {prop: 'id', name: 'Id'},
      {prop: 'serial_number', name: 'Serial Number'},
      {prop: 'actions', name: 'Actions', cellTemplate: this.buttonsTemplate}
      ];
    }

    // This method should be called after clicking an action button
    onSelect({selected}) {
      console.log('Array of selected vehicles', selected);
    }
...

В настоящее время эта ошибка возникает в консоли:

ОШИБКА TypeError: Невозможно прочитать свойство 'serial_number' из неопределенного

Что я делаю неправильно? официальная документация и демонстрационная страница мне не помогла ..

---

Подход от @wentjun (не работает: кнопка не видна внутри столбца)

Шаблон:

<ngx-datatable-column *ngFor="let column of columns; let i = index;" name="{{column.name}}" prop="{{column.prop}}">
  <ng-template #buttonsTemplate let-row="row" let-value="value" ngx-datatable-cell-template>
    <button class="btn btn-transparent" (click)='onSelect(row)'><i class="rb-ic rb-ic-add-frame"></i></button>
  </ng-template>
</ngx-datatable-column>

Компонент (функция):

onSelect({selected}) {
  console.log('Array of selected vehicles', selected);
}

Answer 1

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

Если ваш <ng-template> не вложен в <ngx-datatable-column>, вы должны поместить его в него. Кроме того, при привязке события click вы должны передавать значения row в ваши методы onSelect(), так как вы пытаетесь получить доступ к данным строки. Вам также необходимо использовать директиву ngx-datatable-cell-template в вашей <ng-template>.

Это изменения, которые вы должны сделать:

<ngx-datatable 
[rows]="rows" 
class="material" 
[loadingIndicator]="loadingIndicator"
[columnMode]="'force'" 
[headerHeight]="50" 
[footerHeight]="50" 
[rowHeight]="'auto'"
[columns]="columns" 
[reorderable]="reorderable">

  <ngx-datatable-column *ngFor="let column of columns; let i = index;" name="{{column.name}}" prop="{{column.prop}}">
    <ng-template let-value="value" let-row="row" *ngIf="column.name==='Actions'" ngx-datatable-cell-template>
      <span>
        <button style="background-color:red;height:15px;" (click)='onSelectRed(row)'><i class="rb-ic rb-ic-add-frame"></i></button>
        <button style="background-color:blue;height:15px;" class="btn" (click)='onSelectBlue(value)'><i class="rb-ic rb-ic-add-frame"></i></button>
      </span>
    </ng-template>
  </ngx-datatable-column>
</ngx-datatable>

А в ваших component.ts вы должны иметь доступ к данным всей строки или значению самого свойства в зависимости от значения, которое вы связали в методе click.

onSelectRed(row) {
  console.log(row);
}

onSelectBlue(value) {
  console.log(value);
}

Я создал демо поверх здесь . Как вы можете видеть, значения row и свойство binded (id) доступны в самой кнопке строки.

Answer 2

Pass row вместо $event при нажатии.

<ng-template #buttonsTemplate let-row="row" let-value="value">
  <button class="btn btn-transparent" (click)='onSelect(row)'><i class="rb-ic rb-ic-add-frame"></i></button>
  <button class="btn bt n-transparent" (click)='onSelect(row)><i class="rb-ic rb-ic-abort-frame"></i></button>
  <button class="btn btn-transparent" (click)='onSelect(row)><i class="rb-ic rb-ic-reset"></i></button>
  <button class="btn btn-transparent" (click)='onSelect(row)><i class="rb-ic rb-ic-agility"></i></button>
</ng-template>

и в функции onSelect вы сможете получить доступ к сведениям о строке.

onSelect(row) { 
  console.log(row); 
}

Пожалуйста, найдите рабочую демо