Question

我需要在角度6中为ag-Grid实施自定义的工具提示。以下是我的代码：

app.component.ts

import { Component, OnInit } from '@angular/core';
import { MyTooltipComponent } from '../my-tooltip/my-tooltip.component';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent implements OnInit {

  private frameworkComponents = {};

  constructor() {
    this.frameworkComponents = { myTooltipComponent: MyTooltipComponent };
  }

  aggridConfig0: any = {
      rowData: [],
      columnDefs: [],
      defaultColDef: {
        filter: true,
        sortable: true,
        resizable: false,
        editable: false,
        enableRowGroup: false,
        tooltipComponent: "myTooltipComponent"
      },
      cubeXCreateAgGridColumn: (data) => {
        let temp = [];
        data.forEach((val, key) => {
            if (key == 0) {
              Object.keys(val).forEach((name) => {
                  temp.push({
                    headerName: name,
                    field: name,
                    tooltipField: tooltipName
                  })
              })
            }
        });
        return temp;
      }
  }

  private gridApi0;
  private gridColumnApi0;
  agGrid;
  onGridReady0(params) {
    this.agGrid = [
      {
        "header1": "abc",
        "header2": "efg"
      },
      {
        "header1": "def",
        "header2": "xyz"
      }
    ];
    this.gridApi0 = params.api;
    this.gridColumnApi0 = params.columnApi;
    this.aggridConfig0.rowData = this.agGrid;
    this.gridApi0.setColumnDefs(this.aggridConfig0.cubeXCreateAgGridColumn(this.aggridConfig0.rowData));
  }
}

app.component.html

<ag-grid-angular class="ag-theme-balham base-padding" style="height: 500px" 
                                  [rowData]="aggridConfig0.rowData" 
                                  [columnDefs]="aggridConfig0.columnDefs" 
                                  [defaultColDef]="aggridConfig0.defaultColDef" 
                                  [animateRows]="true" 
                                  [suppressDragLeaveHidesColumns]="true" 
                                  (gridReady)="onGridReady0($event)"
                                  [frameworkComponents]="frameworkComponents">
</ag-grid-angular>

my-tooltip-component.ts

import {Component, ViewEncapsulation} from '@angular/core';
import {ITooltipAngularComp} from "@ag-grid-community/angular";

@Component({
  selector: 'my-tooltip-component',
  template: `
      <div class="custom-tooltip">
          <p><span>Header 1 : {{data.header1}}</span></p>
          <p><span>Header 2 : {{data.header2}}</span></p>
      </div>`,
  styles: [
      `
          :host {
              position: absolute;
              width: 150px;
              height: 70px;
              border: 1px solid cornflowerblue;
              overflow: hidden;
              pointer-events: none;
              transition: opacity 1s;
          }

          :host.ag-tooltip-hiding {
              opacity: 0;
          }

          .custom-tooltip p {
              margin: 5px;
              white-space: nowrap;
          }

          .custom-tooltip p:first-of-type {
              font-weight: bold;
          }
      `
  ]
})
export class MyTooltipComponent implements ITooltipAngularComp {

  private params: any;
  private data: any;

  agInit(params): void {
      this.params = params;
      console.log("params here not printing............",params)
      this.data = params.api.getDisplayedRowAtIndex(params.rowIndex).data;
      this.data.color = this.params.color || 'white';
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AgGridModule } from 'ag-grid-angular';
import 'ag-grid-enterprise';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing/app-routing.module';
import { MyTooltipComponent } from './component/my-tooltip/my-tooltip.component';
@NgModule({
declarations: [
AppComponent, MyTooltipComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule,
AgGridModule.withComponents([MyTooltipComponent])
],
providers: [ ],
bootstrap: [AppComponent]
})
export class AppModule { }

请在此处找到stackblitz网址： https://stackblitz.com/edit/my-tooltip-app

我无法显示从my-tooltip.component.ts到header1列工具提示的自定义数据。我已推荐-https://www.ag-grid.com/javascript-grid-tooltip-component/

请帮帮我。预先感谢

Answer 1

问题已解决。我导入的AgGrdModule存在问题。先前是从 ag-grid-angular 库导入的。我将其更改为 @ ag-grid-community / angular

在我的app.module.ts

import { AgGridModule } from "@ag-grid-community/angular";

谢谢大家.. !!

无法使用工具提示组件自定义Ag-Grid自定义工具提示

1 个答案: