ngx-datatable - 带有操作按钮的自定义列 [英] ngx-datatable - custom columns with action buttons

问题描述

我有一个表(ngx-datatable)，我想在其中定义一个操作"列，然后将在其中放置按钮以进行 CRUD 操作.

创建列并放置按钮有效，但我遇到的问题是，在我的触发函数中不再识别所选行及其列中的值.

这是我的模板:

<ngx-数据表#桌子类=材料"[rowHeight]="'自动'"[列]="列"[columnMode]="'强制'"[headerHeight]="50"[页脚高度]="50"[限制]="10"[行]="汽车?.内容"[选定]="选定"[selectionType]="'multi'"></ngx-datatable>

这是我的带有按钮的自定义模板:

<button class="btn btn-transparent" (click)='onSelect($event)'><i class="rb-ic rb-ic-add-frame"></i></按钮><button class="btn bt n-transparent" (click)='onSelect($event)><i class="rb-ic rb-ic-abort-frame"></i></按钮><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-模板>

我的组件(.ts 文件)的结构如下:

导出类 MyComponent 实现 OnInit, OnDestroy {@ViewChild('buttonsTemplate') buttonsTemplate: TemplateRef;列 = [];ngOnInit() {this.columns = [{prop: 'id', name: 'Id'},{prop: 'serial_number', name: '序列号'},{prop: 'actions', name: 'Actions', cellTemplate: this.buttonsTemplate}];}//这个方法应该在点击一个动作按钮后被调用onSelect({selected}) {console.log('选定车辆的数组', selected);}}

目前这个错误出现在控制台:

<块引用>

错误类型错误:无法读取属性serial_number"未定义的

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

<小时>

来自@wentjun 的方法(不起作用:按钮在列内不可见)

模板:

<ngx-datatable-column *ngFor="let 列的列；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></按钮></ng-模板></ngx-datatable-column>

组件(函数):

onSelect({selected}) {console.log('选定车辆的数组', selected);}

解决方案

我正在使用 ngx-datatable 库，并且我与您的项目有类似的设置，因此我相信我看到您的问题来自.

如果你的 没有嵌套在 中，你应该把它放在里面.此外，在您的 click 事件绑定上，您应该将 row 值传递到您的 onSelect() 方法中，因为您正在尝试访问行数据.您还需要在 中使用 ngx-datatable-cell-template 指令.

这是您应该进行的更改:

<ngx-datatable[行]="行"类=材料"[loadingIndicator]="loadingIndicator"[columnMode]="'强制'"[headerHeight]="50"[页脚高度]="50"[rowHeight]="'自动'"[列]="列"[可重新排序]="可重新排序"><ngx-datatable-column *ngFor="让列的列；让 i = 索引；"name="{{column.name}}" prop="{{column.prop}}"><ng-template let-value="value" let-row="row" *ngIf="column.name==='Actions'" ngx-datatable-cell-template><跨度><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-模板></ngx-datatable-column></ngx-datatable>

并且在您的 component.ts 上，您应该能够访问整行的数据，或者属性本身的值，具体取决于您在 click 方法上绑定的值.

onSelectRed(row) {控制台日志(行)；}onSelectBlue(值){控制台日志(值)；}

我在 这里创建了一个演示.如您所见，可以在行按钮本身内访问 row 和绑定属性 (id) 的值.

I have a table (ngx-datatable) in which I want to define an "actions" column in which buttons will then be placed for CRUD operations.

Creating the column and placing the buttons worked, but I have the problem that the selected row and the values ​​in its columns are no longer recognized inside my triggered function.

Here is my template:

<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>

Here is my custom template with the buttons:

<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>

My component (.ts file) is structured like this:

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);
  }
}

Currently this error occurs in the console:

ERROR TypeError: Cannot read property 'serial_number' of undefined

What am I doing wrong? The official documentation and demo page doesn't helped me..

---

Approach from @wentjun (not working: button not visibile inside column)

The Template:

<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>

The Component (function):

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

解决方案

I am using the ngx-datatable library, and I have a similar setup to your project, thus I believe I see where your problem is coming from.

If your <ng-template> is not nested within the <ngx-datatable-column>,you should put it within it. In addition, on your click event binding, you should be passing the row values into your onSelect() methods, since you are trying to access the row data. You will need to use the ngx-datatable-cell-template directive within your <ng-template> too.

This are the changes you should be making:

<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>

And on your component.ts, you should be able to access the data of the entire row, or the value of the property itself, depending on the value you have binded on the click method.

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

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

I have created a demo over here. As you can see, the values of row and the binded property (id) can be accessed within the row buttons itself.

这篇关于ngx-datatable - 带有操作按钮的自定义列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！