Question

我已经安装了ng2-tooltip-directive并导入了app.module.ts。

我正在尝试向ng2智能表单元格添加工具提示以防溢出，但是valuePrepareFunction()仅添加了class节点列表。我希望它也添加所有工具提示属性。这是代码段：

  NODEBLIST: {
    title: 'eNodeB',
    type: 'html',
    valuePrepareFunction: (data) => '<div class="nodelist" ngbTooltip="You see, I show up on click!" triggers="click:blur">' + data + '</div>',
    // type: 'string',
  },

当我检查元素时，它仅显示已添加类：

<div class="nodelist">KSL05836 KSL09836R</div>

任何有关如何获取工具提示属性的见解将不胜感激！

Answer 1

函数valuePrepareFunction中无法进行角度绑定，因此最好放弃html计划，而改用自定义组件选项。

 NODEBLIST: {
    title: 'eNodeB',
    type: 'custom',
    renderComponent: TooltipComponent
  },

组件

它只是示例代码，您可以根据需要进行修改。

import { Component, OnInit, Input, EventEmitter, Output, NgModule } from '@angular/core';

    @Component({
      selector: 'tooltip-view',
      template: `
        <div class="nodelist" ngbTooltip="You see, I show up on click!" triggers="click:blur">{{rowData.eNodeB}}</div>
      `,
    })

    @NgModule()
    export class TooltipComponent{
      renderValue: string;

      @Input() value: string | number;
      @Input() rowData: any;

    }

entryComponents

@NgModule({
  imports:      [ BrowserModule, FormsModule, Ng2SmartTableModule ],
  entryComponents: [CustomComponent]
})
export class AppModule { }

注意：由于代码是直接在stackoverflow编辑器中编写的，因此可能存在拼写错误或语法错误。请纠正自己。

在ng2智能表中嵌入ng2工具提示

1 个答案:

组件