我在工具提示中显示了一组数据,所以我使用了一个模板。我的代码如下:
<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
为空,我不希望出现工具提示。目前,如果它为空,则仅显示工具提示箭头。
我已尝试在模板内的*ngIf
标记上添加<small>
,但这并不起作用。我还尝试将*ngIf
添加到<ng-template>
无效。
答案 0 :(得分:6)
好的,我终于能够搞清楚了。这是我必须做的事情
<span [ngbTooltip]="(data.months?.length) ? ToolTipTemplate : ''">Months: {{data.months.length}}</span>
答案 1 :(得分:1)
您可以使用#t="ngbTooltip"
之类的元素引用,然后手动触发工具提示。在您的情况下,如果需要则触发它或根本不显示工具提示。
<div
[ngbTooltip]="(data.months?.length) ? ToolTipTemplate : ''"
triggers="manual"
#t="ngbTooltip"
(mouseenter)="(data.months?.length) && t.open()"
(mouseleave)="t.close()">
show Tooltip
</div>
答案 2 :(得分:0)
简单的做法是
<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>
答案 3 :(得分:0)
您可以使用
禁用它<span [ngbTooltip]="ToolTipTemplate" [disableTooltip]="true">Months: {{data.months.length}}</span>
有关更多信息,请参阅文档:https://ng-bootstrap.github.io/#/components/tooltip/api