Question

我试图允许用户使用带有（click）动作的fontawesome图标单击一个范围，但是这似乎在单元格内被丢弃，我检查了手动在页面上放置一个是否可行并且所以我知道代码可以满足我的期望。

我如何使Angular在ag-grid中呈现？

这与我提出的弹出窗口问题有关，但没有成功。

以前我用过：

  angularCompileRows: true,

在网格选项中，但这似乎现在不起作用。

columnDefs = [
    { headerName: 'ID', field: 'id' },
    { headerName: 'Name', field: 'customer.name' },
    { headerName: 'Email', field: 'customer.email' },
    { headerName: 'Actions', field: '', cellRenderer: this.actionCellRenderer }
  ];

.....


  actionCellRenderer(cell: any) {
    const view =
      '<span class="grid-action" (click)="openModal(content)"><a><i class="fa fa-search" style="color:white"></i></a></span>';
    const edit = '<span class="grid-action"><a (click)="clickbait()"><i class="fa fa-pencil-alt" style="color:white"></i></a></span>';
    const del = '<span class="grid-action"><a (click)="open(content)"><i class="fas fa-trash-alt"></i></a></span>';

    const start = '<div class="">';
    const end = '</div>';

    let result = start + view + edit + del + end;

    if (cell.value === null) {
      // result = start + cross + end;
    }
    return result;
  }

openModal(content: any) {
    console.log('openModal hit');
    this.modalService.open(AddEditCustomerComponent).result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
  }

任何帮助表示赞赏。

PLUNKER：https://plnkr.co/edit/cUQaAGStLn0Hs3SS6acF

Answer 1

我也无法使其正常工作，但是作为一种解决方法，您可以尝试以下方法

获取行点击事件

<ag-grid-angular style="width: 100%; height: 450px;" class="ag-theme-material"
                 [gridOptions]="gridOptions" (rowClicked)="onClick($event)">
</ag-grid-angular>

并从目标事件的类别中确定单击了哪个按钮

public onClick(e) {
    let button = e.event.target.getAttribute("class");
    console.log(button)
    switch(button) {
        case "fa fa-search":
            alert("clicked on search")
            return;
        case "fa fa-pencil-alt":
            alert("clicked on edit")
            return;
        case "fas fa-trash-alt":
            alert("clicked on delete")
            return;
    }
}

Demo

Answer 2

引用：HTML DOM createElement() Method

引用：HTML DOM addEventListener() Method

引用：What Does JavaScript Void(0) Mean?

private actionCellRenderer(cell: any) {
    const eDiv = document.createElement('div');
    eDiv.innerHTML = '<span class="grid-action pointer"  href="javascript:void(0)"><a><i class="fa fa-search" style="color:black"></i></a></span>';
    eDiv.addEventListener('click', () => {
        alert('Your button is clickable');
    });
    return eDiv;
    }

    private createColumnDefs() {
        return [{
                headerName: "Full Name",
                field: "full_name"
            },
            {
                headerName: "actions",
                field: "full_name",
                cellRenderer: this.actionCellRenderer
            }
        ];
    }

尝试将不同的iocn用作按钮。

在渲染的单元格内显示可点击的按钮

2 个答案: