angular - 如何为 ng2-smart-table 添加新的自定义按钮
问题描述
我ng2-smart-table
在我的项目中用作表格。您可以在下面看到它。
但是,我想view
在表格的每一行末尾添加一个为此命名的自定义按钮。以及我想在单击view
按钮时打开一个新组件。那我应该为此做些什么。我尝试如下。但不是成功。
add: {
addButtonContent: '<i class="nb-plus"></i>',
createButtonContent: '<i class="nb-checkmark"></i>',
cancelButtonContent: '<i class="nb-close"></i>',
confirmCreate: true
},
edit: {
editButtonContent: '<i class="nb-edit"></i>',
saveButtonContent: '<i class="nb-checkmark"></i>',
cancelButtonContent: '<i class="nb-close"></i>',
confirmSave: true
},
delete: {
deleteButtonContent: '<i class="nb-trash"></i>',
confirmDelete: true
},
view:{
viewButtonContent:''
},
解决方案
像这样定义设置。
settings = {
columns: {
name: {
title: 'Title',
},
description: {
title: 'Description',
},
customColumn: {
title: 'Actions',
type: 'custom',
filter: false,
renderComponent: MyCustomComponent,
onComponentInitFunction(instance) {
//do stuff with component
instance..subscribe(data=> console.log(data))
}
...
并像这样定义新的按钮组件,
@Component({
selector: 'll-button-comp',
template: ` <button (click)="click.emit(rowData)"> my button</button> `
})
export class MyCustomComponent implements OnInit{
@Input() rowData: any;
@Output() click:EventEmitter<any> = new EventEmitter(this.rowData);
ngOnInit(){
}
}
请注意,rowData
(所选行的对象)将传递给该实例所属行的组件
推荐阅读
- javascript - 使用 Fabric JS 定义标记线
- sql - SQL 在 2 个单独的列中从 2 个单独的行中减去一个值
- ruby-on-rails - Rails 验证错误消息删除键
- google-cloud-endpoints - 如何在服务器端运行可以通过 Google Cloud Endpoints 创建新文件的按需脚本?
- report - Cognos 结果按 day_of_week/工作日
- python - 在 Python 中进行人脸识别的 Face Anti-Spoofing 方法
- json - 使用 Alamofire 在多形式 Swift 的参数中附加嵌套对象
- java - 如何将方法内部的字符串数组传递给另一个方法?
- android - 从 GridViewFragment 到 ViewPager2Fragment 的 Android ShareElement 奇怪
- node.js - 安装后 nyc 无法识别为命令