Средство форматирования угловых пятен - загрузчик ngbTooltip не работает

Question

Я использую angular-slickgrid в своем угловом приложении с начальной загрузкой 4. Я использую средство форматирования custum для одного столбца, например, подробно:

Код средства форматирования 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; }

ниже приведен код для использования вышеуказанного средства форматирования custum в angular-silkgrid:

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

При запуске приложения я проверил, что не могу увидеть подсказку «Подробности». Так что проблема в том, что bootstrap ngbTooltip не работает с форматером custum в angular-slickgrid.

Answer 1

Обратите внимание, что я являюсь автором Angular-Slickgrid.

Вы не можете использовать Angular напрямую в Formatter, причина в том, что эта библиотека является оболочкой библиотеки javascript / jQuery, а для форматирования требуетсясинхронная функция, которая сразу возвращает строку (в формате html), а Angular не сразу возвращает, вам нужно как минимум 1 цикл, прежде чем она вернется.

Ответ в этом Демо и коде Компонента . Вам нужно использовать 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. Причина в том, что это просто, поскольку Formatter с Angular определяется как асинхронный, они намного медленнее (вы увидите их загрузку / рендеринг в сетке, поскольку для рендеринга требуется цикл).

Это работает, но да, я настоятельно рекомендую пересмотреть вопрос об использовании только простых форматтеров HTML (хотя я и добавил демонстрационную версию, я никогда не использую Angular Formatters).