Angular-slickgrid custum Formatter-bootstrap ngbTooltip无法正常工作

Question

我正在使用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中使用上述custum格式化程序的代码：

 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，原因是因为此库是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 Formatters）。