angular - ngx-bootstrap 工具提示中的 isDisabled 属性

Question

我已经实现了 ngx-bootstrap 的工具提示，并且该工具提示在正常情况下工作正常。但我想有条件地显示工具提示。

当我包含 isDisabled 属性时，我在以下任何场景中都看不到工具提示。我错过了什么吗？

<span tooltip="{{toolTipText}}" triggers="" #pop="bs-tooltip" placement="bottom" isDisabled="true"></span>
<button type="button" (click)="toggleSelect()" (mouseenter)="pop.show()" (mouseleave)="pop.hide()">
    <span class="pull-left">Click Here!</span>
</button>

（或者）

<span tooltip="{{toolTipText}}" triggers="" #pop="bs-tooltip" placement="bottom" isDisabled="false"></span>
<button type="button" (click)="toggleSelect()" (mouseenter)="pop.show()" (mouseleave)="pop.hide()">
    <span class="pull-left">Click Here!</span>
</button>

Answer 1

您需要使用 将[bracket syntax]输入参数评估为 javascript 而不是静态值。

这意味着你需要做[isDisabled]="false/true"而不是isDisabled="false/true". 执行后面的示例实际上会传入字符串 'true' 或 'false'

这是一个工作的PLUNKER

<div style="margin: 100px;">
  <button type="button" class="btn btn-default btn-secondary"
    tooltip="isDisable = true"
    [isDisabled]="true"
    placement="top">
    isDisable = true
  </button>
</div>
<div style="margin: 100px;">
  <button type="button" class="btn btn-default btn-secondary"
    tooltip="isDisable = false"
    [isDisabled]="false"
    placement="top">
    isDisable = false
  </button>
</div>