NGX 数据表 - 带有操作按钮的自定义列

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

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

错误

类型错误： 无法读取属性"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() 方法中，因为您正在尝试访问行数据。您还需要在<ng-template>中使用 ngx-datatable-cell-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 ( 可以在行按钮本身中访问。

Answer 2

<ng-container *ngFor='let column of columns' >
            <ngx-datatable-column *ngIf='column.name === "Actions"' name="Actions" prop="actions">
                <ng-template let-value="value" let-row="row" ngx-datatable-cell-template>
                    <span>
                        <button class='btn btn-icon icon-left'>
                            Continue
                            <i [ngClass]='row.actions.continue'></i>
                        </button>
                        <button class='btn btn-icon icon-left'>
                            Remove
                            <i [ngClass]='row.actions.delete'></i>
                        </button>
                    </span>
                </ng-template>
            </ngx-datatable-column>
            <ngx-datatable-column *ngIf='column.name !== "Actions"' name="{{column.name}}" prop="{{column.prop}}">
            </ngx-datatable-column>
        </ng-container>

OP wentjun的解决方案更适合Angular 10+中的ng容器。

Answer 3

Credits to @m4limo

(我添加了自己的观察(

---

原文评论

只需使用ng-tamplate：

<ngx-datatable-column name="Actions" sortable="false" prop="id">
      <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
            <button md-icon-button (click)="blockAgents(value)">
              <i class="fa fa-ban"></i>
            </button>
            <button md-icon-button (click)="approveAgent(value)">
              <i class="fa fa-check"></i>
            </button>
      </ng-template>
</ngx-datatable-column>

value对应于您在 ngx-datatable-column 中定义的属性prop，在本例中为 id

---

观察

您需要在 ngx-datatable-column 元素的 prop 属性中声明列 prop 名称，let-value会将该属性分配给一个名为"value"的变量，该变量将在您的ng-template子对象中分配/使用。

"value"将使用列prop值从您的行(列出的对象(中获取属性值。列属性名称需要与行对象的属性匹配。

笔记

• 在 Angular 9.1.1 中测试(使用 Ivy(
• 使用 @swimlane/ngx-datatable 16.0.3

原始 GitHub 评论在这里

Answer 4

点击时传递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); 
}

请找到工作演示