typescript Angular 6 ag-grid 单元格渲染器点击功能
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50990806/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 6 ag-grid cell renderer click function
提问by Ponzi314
So I'm trying to setup ag-grid and I can't get one thing to work. I want to have a column that is actions. Then I want it to have a link or button that triggers a method in the component file.
所以我正在尝试设置 ag-grid 并且我无法让一件事起作用。我想有一列是动作。然后我希望它有一个链接或按钮来触发组件文件中的方法。
For the column def I have the following. What am I doing wrong?
对于列 def 我有以下内容。我究竟做错了什么？
{
headerName: 'Actions',
cellRenderer: params => {
return `<a (click)="onEditClick("${params.data.hostname}")">Edit</a>`;
}
}
回答by Peter1982
I use cellRenderFramework:
我使用 cellRenderFramework：
{
headerName: '', width: 30,
cellRendererFramework: ActionCellRendererComponent,
cellRendererParams: {
icon: 'fa-download',
action: this.downloadAttachmentAction
}
}
and than I have custom Component
并且比我有自定义组件
@Component({
selector: 'cu-download-link-cell-renderer',
template: `
<div class="text-center">
<i class="fa {{params.icon}}" (click)="onClick()" aria-hidden="true"></i>
</div>`
})
export class ActionCellRendererComponent {
params;
constructor() {
}
agInit(params): void {
this.params = params;
if (_.isNil(params.action)) {
throw new Error('Missing action parameter for ActionCellRendererComponent');
}
}
onClick(): void {
this.params.action(this.params);
}
}
export type CellAction = (params) => void;
回答by Jerold Joel
Use cellRendererFrameworkto add action Buttons.
使用cellRendererFramework添加动作按钮。
App.component.ts
App.component.ts
columnDefs = [
{ headerName: 'First Name', field: 'firstName', sortable: true, filter: true },
{ headerName: 'Last Name', field: 'lastName', sortable: true, filter: true },
{ headerName: 'Email', field: 'email', sortable: true, filter: true },
{ headerName: 'User Name', field: 'userIdName', sortable: true, filter: true },
{ headerName: 'Role', field: 'role', sortable: true, filter: true },
{ headerName: 'Actions', field: 'action', cellRendererFramework: CellCustomComponent }];
rowData: any;
ngOnInit() {
const empDatas = localStorage.getItem('user');
const finalData = JSON.parse(this.empDatas);
this.rowData = this.finalData;
}
In the above code, we can see CellCustomComponent. Create that component & add the buttons.
在上面的代码中，我们可以看到CellCustomComponent。创建该组件并添加按钮。
cell-custom.component.html
cell-custom.component.html
<button type="button" class="btn-success" (click)="editRow()">Edit</button>
<button type="button" class="btn-success" (click)="viewRow()">View</button>
Now in the cell-custom.component.tsadd the functions
现在在cell-custom.component.ts添加函数
cell-custom.component.ts
cell-custom.component.ts
export class CellCustomComponent implements OnInit {
data: any;
params: any;
constructor(private http: HttpClient, private router: Router) {}
agInit(params) {
this.params = params;
this.data = params.value;
}
ngOnInit() {}
editRow() {
let rowData = this.params;
let i = rowData.rowIndex;
console.log(rowData);
}
viewRow() {
let rowData = this.params;
console.log(rowData);
}
}
After this we need to add this component in App.module.ts
之后我们需要在App.module.ts 中添加这个组件
app.Module.ts
app.Module.ts
@NgModule({
declarations: [AppComponent, CellCustomComponent],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
HttpClientModule,
AgGridModule.withComponents([AppComponent])
],
providers: [],
entryComponents: [CellCustomComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
Now we can trigger a method in the component file using Button.
现在我们可以使用 Button 触发组件文件中的方法。
