Angular 6 Ag-grid单元格渲染器单击功能 [英] Angular 6 ag-grid cell renderer click function

问题描述

所以我正在尝试设置ag-grid，但我做不到一件事.我想有一列动作.然后，我希望它有一个链接或按钮来触发组件文件中的方法.

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.

对于列def，我有以下内容.我在做什么错了?

For the column def I have the following. What am I doing wrong?

 {
    headerName: 'Actions',
    cellRenderer: params => {
      return `<a (click)="onEditClick("${params.data.hostname}")">Edit</a>`;
    }
 }

推荐答案

我使用cellRenderFramework:

I use cellRenderFramework:

    {
    headerName: '', width: 30,
    cellRendererFramework: ActionCellRendererComponent,
    cellRendererParams: {
      icon: 'fa-download',
      action: this.downloadAttachmentAction
    }
  }

并且我有自定义组件

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

这篇关于Angular 6 Ag-grid单元格渲染器单击功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！