Angular-slickgrid custum Formatter - 引导 ngbTooltip 不起作用

Question

我在我的 angular 应用程序中使用 bootstrap 4 使用 angular-slickgrid。我正在为一列使用 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}

在运行应用程序时，我检查了我无法看到提示“详细信息”。所以问题是 bootstrap ngbTooltip 不能与 angular-slickgrid 中的 custum 格式化程序一起使用。

Answer 1

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

你不能直接在 Formatter 中使用 Angular，原因是因为这个 lib 是 javascript/jQuery 库的包装器，并且 formatter 需要一个同步函数来立即返回一个字符串（以 html 格式）和 Angular 不会立即返回，您至少需要 1 个周期才能返回。

答案就在这个Demo 和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 被定义为异步的，所以它们要慢得多（你会看到它们在网格中加载/渲染，因为渲染需要一个周期）。

它可以工作，但是我强烈建议重新考虑只使用普通的 html 格式化程序（尽管我添加了一个演示，但我从不使用 Angular 格式化程序）。