原始评论

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” 的未定义

我在做什么错？ official documentation和demo page对我没有帮助。

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

我已经在here上创建了一个演示。如您所见，可以在行按钮本身中访问row和绑定属性（id）的值。

Answer 2

贷记@m4limo

（我补充了自己的看法）

原始评论

只需使用for(let i in array1) { array1[i] = foo(array[i]); }：

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中定义的属性prop，在这种情况下为ngx-datatable-column

观察

您需要在id元素的prop属性内声明列prop名称，ngx-datatable-column会将属性分配给一个变量，在这种情况下，命名为“ value”，将在您的let-value子对象中分配/使用。

“值”将使用列ng-template的值从您的行（列出的对象）中获取属性值。列道具名称 NEED 与行对象的属性匹配。

注释

在Angular 9.1.1中进行了测试（使用Ivy）
使用@ swimlane / ngx-datatable 16.0.3

原始GitHub评论here

Answer 3

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

OPgonjun的解决方案在Angular 10+中的ng-container上效果更好。

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

请找到有效的demo

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

4 个答案:

原始评论

观察

注释