ngx-datatable-具有操作按钮的自定义列 [英] ngx-datatable - custom columns with action buttons
问题描述
我有一个表( 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" 的未定义
我做错了什么? 官方文档和 组件(功能):
我正在使用 如果您的 这是您应该进行的更改: 在component.ts上,您应该能够访问整行的数据或属性本身的值,具体取决于您在click方法上绑定的值. 我已经在此处创建了一个演示.如您所见, 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: Here is my custom template with the buttons: My component (.ts file) is structured like this: 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: The Component (function):
I am using the If your This are the changes you should be making: 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. I have created a demo over here. As you can see, the values of 这篇关于ngx-datatable-具有操作按钮的自定义列的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!<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);
}
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>
onSelectRed(row) {
console.log(row);
}
onSelectBlue(value) {
console.log(value);
}
row
的值和绑定的属性(id
)可以在行按钮本身中访问.<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>
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);
}
}
<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);
}
ngx-datatable
library, and I have a similar setup to your project, thus I believe I see where your problem is coming from.<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.<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>
onSelectRed(row) {
console.log(row);
}
onSelectBlue(value) {
console.log(value);
}
row
and the binded property (id
) can be accessed within the row buttons itself.