Question

我正在使用ag网格我自定义几个列并使用以下方法使用bootstrap popover属性 -

private createColumnDefs() {
   this.columnDefs = [{headerName: 'Description', field: "description", headerTooltip: "Description",minWidth: 150,
                    cellRenderer: function(params){
                    var text = params.data.description;
                    return '<a title="Description" data-toggle="popover" data-placement="top" data-trigger="hover" data-content="'+text+'">'+text+'</a>';
                }}
        ];
    }

现在我正在使用jQuery初始化popover，如下所示 -

$("[data-toggle=popover]").popover();

但似乎jquery代码在呈现网格中的Description列之前执行。弹出窗口不起作用。任何人都可以提出我应该在这里使用的解决方案或方法。

Answer 1

如上所述，您必须在调用popover方法之前确保网格已准备就绪并且所有html元素均已呈现。

还需要确保已在内存中加载 bootstrap ， Jquery 和 popper ，以便您的代码可以利用他们。我在index.html文件中另外添加了它们。

    onGridReady(params) {
    this.gridApi = params.api; // your usual operations  
    this.gridColumnApi = params.columnApi; // your usual operations
    $("[data-toggle=popover]").popover();
    }

签出此plunkr。

如何在Angular 2中的ag网格单元格中使用bootstrap popover？

1 个答案: