ngx-datatable Добавление кнопок в каждую строку

Question

Я занят изучением использования таблиц данных ngx в приложениях Ioni c (с использованием angular), и мне нужно иметь возможность добавлять кнопки редактирования и удаления в каждую строку.

I Я видел, как люди используют шаблоны, но я не уверен, как это работает, я делаю вызов API и отображаю данные как обычно, используя

<ngx-datatable class="material"
[rows]="rowdata"
[columns]="columndata">
</ngx-datatable>

Но теперь мне нужен дополнительный столбец с кнопкой редактирования и удаления, которая принимает идентификатор из каждой строки и передает его функции редактирования и удаления в файле .ts.

Как один go делает это?

Спасибо R

Answer 1

Вам необходимо определить имя нового столбца Actions с пропеллером Id в качестве целевого значения. а также необходимо, чтобы каждый столбец был объявлен внутри ngx-datatable

HTML код

    <ngx-datatable class="material"
      [rows]="rowdata"
      [columns]="columndata">


 <ngx-datatable-column name="Actions" prop="name">
   <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value"
                                    let-row="row">
                                    <button type="button" class="btn btn-outline-success"
                                        (click)='edit(value)'>Success {{rowIndex}}</button>
                                    <button type="button" class="btn btn-outline-danger"
                                        (click)='delete(value)'>Danger</button>


              </ng-template>
          </ngx-datatable-column>
  <ngx-datatable-column name="Name" prop='name' >
           </ngx-datatable-column>  // need to define each column with empty body

</ngx-datatable>

код TS

columns = [ ... { name: 'Actions', prop: 'Id' } //new column to existing column array  ***define prop to Id 
  ];


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


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