如果工具提示模板为空，如何在 Angular2 中禁用 NgbTooltip？

Question

我在工具提示中显示了一组数据，所以我使用了一个模板。我的代码如下所示：

<ng-template #ToolTipTemplate>
    <small *ngFor="let month of data.months; let first = first; let last = last"> {{ month.appliedMonthYear | utc | date:'MM/y' }}{{ last ? '' : ', ' }} </small>
</ng-template>

<span [ngbTooltip]="ToolTipTemplate">Months: {{data.months.length}}</span>

如果 data.months 为空，我不想显示工具提示。目前，如果它为空，则仅显示工具提示箭头。

我试过在模板内的 <small> 标签上添加 *ngIf，但没有成功。我也尝试将 *ngIf 添加到 <ng-template> 中，但无济于事。

Answer 1

简单的做法是

<div *ngIf='data.months.length > 0'>
    <ng-template #ToolTipTemplate>
        <small *ngFor="let month of data.months; let first = first; let last = last"> {{ month.appliedMonthYear | utc | date:'MM/y' }}{{ last ? '' : ', ' }} </small>
    </ng-template>

    <span [ngbTooltip]="ToolTipTemplate">Show Info</span>
</div>
<div *ngIf='data.months.length === 0'>
    <span>Show Info</span>
</div>

Answer 2

好吧，我终于弄明白了。这是我必须做的

<span [ngbTooltip]="(data.months?.length) ? ToolTipTemplate : ''">Months: {{data.months.length}}</span>

Answer 3

您可以采用 #t="ngbTooltip" 之类的元素引用，然后手动触发工具提示。在你的情况下，如果需要就触发它，或者根本不显示工具提示。

<div
   [ngbTooltip]="(data.months?.length) ? ToolTipTemplate : ''"
  triggers="manual"
  #t="ngbTooltip"
  (mouseenter)="(data.months?.length) && t.open()"
  (mouseleave)="t.close()">
show Tooltip
</div>

Answer 4

您可以使用

禁用它

<span [ngbTooltip]="ToolTipTemplate" [disableTooltip]="true">Months: {{data.months.length}}</span>

有关详细信息，请参阅文档：https://ng-bootstrap.github.io/#/components/tooltip/api

Answer 5

您可以使用 disableTooltip 输入属性。

https://ng-bootstrap.github.io/#/components/tooltip/api

如果工具提示模板为空，如何在 Angular2 中禁用 NgbTooltip？

How to disable NgbTooltip if tooltip template is empty, in Angular2?

javascript

tooltip

angular2-template

ng-bootstrap

angular