Как использовать Angular ngbPopover в CellRenderer для ячейки ag-grid

Question

Я установил и начал работать с Angular Application, в котором я решил использовать ag-grid-сообщество в качестве ключевого базового компонента (отображение данных из внутреннего интерфейса API в таблицах и использование потрясающих значков для облегчения чтения данных).

У меня все выглядит нормально, и все идет нормально, но когда я пытаюсь применить всплывающую подсказку ngbPopover к отображаемому значку cellrenderer (отметки и x для утвержденного логического значения) с именем пользователя, который утвердил действие значок отображается, но мой поповер - нет.

Я пытался найти и устранить неисправность, но не могу найти какие-либо конкретные решения на основе угловых / TS - у меня также было ощущение, что рендеринг рендерит за пределами жизненного цикла угловых точек и что сгенерированного всплывающего окна нет, потому что я упускаю точку, в которой он должен присутствовать, чтобы быть пойманным и правильно обработанным.

Ранее я делал это с предыдущей версией angular, и она работала, но мы там не использовали ngbpopover - но я хочу здесь.

Кроме того, я также переключил всплывающую подсказку в ячейку с помощью tooltipField, но мне действительно не нравится поле для показа в этом поле, и оно недостаточно четкое, я специально хочу, чтобы оно было на моем изображении.

approvalCellRenderer(cell: any) {
    const popover = `
                      ngbPopover="Popover Working!"
                      triggers="mouseenter:mouseleave"
                      popoverTitle="Pop titleimg"
                      container="body"
                    `;
    const tick = '<i class="fa fa-check-circle" style="color:green" ' + popover + '></i>';
    const cross = '<i class="fa fa-times-circle align-center" style="color:red"' + popover + '></i>';

    const start = '<div class="">';
    const end = '</div>';

    let result = start + tick + end;

    if (cell.value === null) {
      result = start + cross + end;
    }
    return result;
  }

Любой совет о том, что я делаю неправильно, был бы великолепен.

Answer 1

ag-grid cell-renderer рендерит заданный пользовательский компонент рендеринга в самой ячейке Таким образом, вы не сможете визуализировать его как поповер, так как он визуализируется внутри ячейки.

Поэтому вы можете написать собственный компонент редактора ячеек и привязать его к вашей ячейке, который затем отобразит информацию за пределами ячейки.

Пример кода

grid.component.html

<ag-grid-angular #agGrid style="width: 100%; height: 500px;" class="ag-theme-balham" [gridOptions]="gridOptions"
  (gridReady)="onGridReady($event)">
</ag-grid-angular>

grid.component.ts

GridOptions и фиктивные данные устанавливаются через это.

import { Component, OnInit } from '@angular/core';
import { GridOptions } from 'ag-grid-community';
import { OptionsCellRendererComponent } from './options-cell-renderer/options-cell-renderer.component';

@Component({
  selector: 'app-grid',
  templateUrl: './grid.component.html'
})
export class GridComponent implements OnInit {
  gridOptions: GridOptions;

  constructor() { }

  ngOnInit() {
    this.gridOptions = {
    } as GridOptions;
  }

  onGridReady(params) {
    this.setData();
  }

  setData() {
    this.gridOptions.api.setColumnDefs(this.getColumnDefinitions());
    this.gridOptions.api.setRowData(this.getData());
  }

  getColumnDefinitions(): any {
    return [
      {
        field: 'option',
        headerName: 'Option',
        cellRendererFramework: OptionsCellRendererComponent
      },
      {
        field: 'year',
        headerName: 'Year'
      },
    ]
  }

  getData(): any {
    return [
      {
        option: '1',
        year: 1990
      },
      {
        option: null,
        year: 1991
      }
    ];
  }

}

варианты клеточно renderer.component.html

Отображение значка отклонения или утверждения на основе значения параметра

<ng-template #approvePopup>
    This is a simple popover
</ng-template>

<img style="height: 20px; width:20px;" *ngIf="!isValid()" src="../../../assets/images/1.png" [ngbPopover]="approvePopup"
    placement="auto" triggers="mouseenter:mouseleave" />
<img style="height: 20px; width:20px;" *ngIf="isValid()" src="../../../assets/images/2.png" [ngbPopover]="approvePopup"
    placement="auto" triggers="mouseenter:mouseleave" />

варианты клеточно-renderer.component.ts

Проверка правильности значения параметра

import { Component } from '@angular/core';
import { ICellRendererAngularComp } from 'ag-grid-angular';

@Component({
  selector: 'app-options-cell-renderer',
  templateUrl: './options-cell-renderer.component.html',
  styleUrls: ['./options-cell-renderer.component.css']
})
export class OptionsCellRendererComponent implements ICellRendererAngularComp {
  public params: any;
  option: string;

  agInit(params: any): void {
    this.params = params;
  }

  isValid(): boolean {
    return this.params.value !== undefined && this.params.value !== null;
  }


  refresh(): boolean {
    return false;
  }

  constructor() { }

}

Вот так это будет выглядеть