在 ng2 smart 中嵌入 ng2 工具提示 table

Question

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

我正在尝试向 ng2 smart table 单元格添加工具提示以防止溢出，但 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',
  },

当我检查元素时，它只显示添加了 class：

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

任何关于如何获取要添加的工具提示属性的见解都将不胜感激！

Answer 1

Angular 绑定在函数 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;

    }

条目组件

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

Note : Since the code is written in the Whosebug editor directly, there could be typo or syntactical error. Please correct yourself.

在 ng2 smart 中嵌入 ng2 工具提示 table

Embedding ng2 tooltip in ng2 smart table

ng2-bootstrap

ng2-smart-table

angular

组件