Angular-slickgrid custum Formatter - bootstrap ngbTooltip 不工作

Question

我在我的 angular 应用程序中使用 angular-slickgrid bootstrap 4. 我正在为一列使用 custum 格式化程序，详细信息如下：

（cusum.formatter.ts 文件中的自定义格式化程序代码）：

export const detailFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any, grid?: any) => {
const template = `<button ngbTooltip="Details" class="btn btn-outline-secondary mr-2 btn-floating btn-blue-grey btn-sm"><i class="fa fa-info"></i></button>`;
return template; }

下面是在 angular-silkgrid 中使用上述自定义格式化程序的代码：

 this.columnDefinitions = [{formatter: detailFormatter,  id: 'detail', name: '', field: 'detail', minWidth: 50,width: 50, maxWidth: 50}, ....other columns}

在运行应用程序上，我检查过我无法看到提示 'Details'。所以问题是 bootstrap ngbTooltip 不能与 angular-slickgrid.

中的自定义格式化程序一起使用

Answer 1

请注意，我是 Angular-Slickgrid 的作者。

你不能在 Formatter 中直接使用 Angular，原因是因为这个库是 javascript/jQuery 库的包装器，格式化程序需要一个同步函数，return 是一个字符串（在 html 格式）马上 Angular 不会 return 马上，你至少需要 1 个循环 return秒。

答案就在这个Demo and the code for the Component。您需要使用 asyncPostRender

从该演示中获取代码示例

export class MyComponent implements OnInit {
  prepareGrid() {
    this.columnDefinitions = [
      {
        id: 'assignee2',
        name: 'Assignee with Angular Component',
        field: 'assignee',
        filterable: true,

        // to load an Angular Component, you cannot use a Formatter since Angular needs at least 1 cycle to render everything
        // you can use a PostRenderer but you will visually see the data appearing,
        // which is why it's still better to use regular Formatter (with jQuery if need be) instead of Angular Component
        asyncPostRender: this.renderAngularComponent.bind(this),
        params: {
          component: CustomTitleFormatterComponent,
          angularUtilService: this.angularUtilService,
          complexFieldLabel: 'assignee.name' // for the exportCustomFormatter
        },
        exportCustomFormatter: Formatters.complexObject,
      }
    ]; 

    this.gridOptions = {
      asyncEditorLoading: false,
      enableAsyncPostRender: true, // for the Angular PostRenderer, don't forget to enable it
      asyncPostRenderDelay: 0,    // also make sure to remove any delay to render it
    };
  }
}

但是，我强烈建议您考虑使用普通的 html javascript 自定义格式化程序。原因很简单，因为带有 Angular 的 Formatter 被定义为异步，所以它们要慢得多（你会在网格中看到它们 loading/rendered，因为它需要一个周期来渲染）。

它有效，但是是的，我强烈建议重新考虑仅使用普通的 html 格式化程序（虽然我添加了一个演示，但我从不使用 Angular 格式化程序）。

Angular-slickgrid custum Formatter - bootstrap ngbTooltip 不工作

Angular-slickgrid custum Formatter - bootstrap ngbTooltip not working

slickgrid

bootstrap-4

angular