Question

我正在ngx-bootstrap中使用工具提示，并希望将数据传递到工具提示的ng-template。该文档提供了[tooltipContext]，但似乎没有用。我提供了一个代码段。

HTML：

id = 1
list_of_str = ['A sample string', "A second string with a ' single quote", 'a third string']
update_qry = """
    UPDATE mytable
    SET arraycolumn = %s,
    timestamp = now() 
    WHERE id = %s
    """

cur = conn.cursor()
cur.execute(update_qry, [list_of_str, id])
conn.commit()

REF：https://valor-software.com/ngx-bootstrap/#/tooltip

Answer 1

我在项目中使用了引导程序popover，因此建议使用弹出窗口。

此外，在GitHub上创建了一个问题，但用户最终使用了popover- https://github.com/valor-software/ngx-bootstrap/issues/4775

Answer 2

我也遇到了同样的问题，到目前为止，我已经检查了源代码中已弃用的tooltipContext标记，您可以像这样一来进行工作

您仍然可以访问ng-template内的view属性

<button type="button" class="btn btn-success"
          *ngIf="view.isVisible"
    [tooltip]="tooltipTmpl">
  Show me tooltip with html {{ view.title }}
</button>

<ng-template #tooltipTmpl>
    <h4>
        {{ view.dateRangeText }}
    </h4>
    <div>
        <i>
      {{ view.data }}
   </i>
    </div>
</ng-template>

demo ??

已更新??

如果要对视图数组使用我的关系，则需要将ng-template移到ngFor的正文中。

模板

<ng-container *ngFor=" let view of views">
    <button type="button" class="btn btn-success"
          *ngIf="view.isVisible"
    [tooltip]="tooltipTmpl">
  Show me tooltip with html {{ view.title }}
</button>
    <ng-template #tooltipTmpl>
        <h4>
            {{ view.dateRangeText }}
        </h4>
        <div>
            <i>
      {{ view.data }}
   </i>
        </div>
    </ng-template>
    <br>
    <br>
</ng-container>

demo ??

Answer 3

@Yiu Pang Chan-您可以使用以下方法查看数组。

在app.component.html文件中

Array
(
    [0] => He needs to cultivate in order to be at the
    [1] => fourth level of the Martial Body Stage. Does he have
    [2] => inner energy?" Everyone jeered, laughed, and taunted. Qin Yun turned
    [3] => deaf ear to their taunts. His eyes were filled with
    [4] => sincerity as he looked at Yang Shiyue and said, "Teacher,
    [5] => I only formed my elemental energy this morning. I still
    [6] => not familiar with the control of my elemental energy and
    [7] => inner energy." After the empress heard the jeers from the
    [8] => crowd, she let out a sigh of relief and sneered,
    [9] => "This is only a little bit of inner Qi that
    [10] => you forced out. You have not yet stepped into the
    [11] => fourth level of the Martial Body realm and have no
    [12] => chance of breaking through. embarrass yourself!
)
Array
(
    [0] => He needs to cultivate in order to be at the fourth level of the Martial Body Stage. Does he have inner energy?" Everyone jeered, laughed, and taunted. Qin Yun turned
    [1] => deaf ear to their taunts. His eyes were filled with sincerity as he looked at Yang Shiyue and said, "Teacher, I only formed my elemental energy this morning. I still
    [2] => not familiar with the control of my elemental energy and inner energy." After the empress heard the jeers from the crowd, she let out a sigh of relief and sneered,
    [3] => "This is only a little bit of inner Qi that you forced out. You have not yet stepped into the fourth level of the Martial Body realm and have no
    [4] => chance of breaking through. embarrass yourself!
)

在app.component.ts文件中

<div *ngFor="let view of views; let i = index">
   <button type="button" class="btn btn-success"
          *ngIf="view.isVisible"
      [tooltip]="tooltipTmpl" on-mouseover="setTooltipData(view)" >
     Show me tooltip with html {{ view.title }}
   </button>
</div>

<ng-template #tooltipTmpl>
    <h4>
        {{ viewDateRangeText }}
    </h4>
    <div>
        <i>
      {{ viewData }}
   </i>
    </div>
</ng-template>

Answer 4

@ rkp9感谢您提供的代码。它确实解决了问题，但是在TS代码中添加了viewDateRangeText，viewData和setTooltipData。

我采用@MuhammedAlbarmavi建议的方法，因为它没有额外的变量和函数。 Github上的评论没有我们需要的弹出窗口配置，就像工具提示一样。我在下面有它。

<ng-template #tooltipTmpl let-view="view">
    <div class="tooltip-section">
        <div class="section-title">
            {{ view.dateRangeText }}
        </div>
        <div class="section-text">
            {{ view.data }}
        </div>
    </div>
</ng-template>
<div
   [popoverContext]="{ view: view }"
   [popover]="tooltipTmpl"
   triggers="mouseenter:mouseleave"
   placement="top"
>
  <div class="sub-title">
    {{ view.title }}
  </div>
</div>

将上下文传递到ngx引导程序的工具提示

4 个答案: