时间戳

首页 > 解决方案 > ngx-datatable - 带有操作按钮的自定义列

angular - ngx-datatable - 带有操作按钮的自定义列

问题描述

我有一个表（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);
  }
}

目前此错误发生在控制台中：

错误类型错误：无法读取未定义的属性“序列号”

我究竟做错了什么？官方文档和演示页面对我没有帮助..

来自@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);
}

标签： angularangular-materialngx-datatableviewchildng-template

解决方案

我正在使用该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绑定属性 ( id) 的值可以在行按钮本身内访问。

推荐阅读