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

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

正如上面评论中所述，您必须确保网格已准备好并且所有 html 元素都已渲染，然后再对它们调用 popover 方法。

您还需要确保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。