有条件地以角度9显示Kendo工具提示

时间:2020-05-11 14:01:44

标签: angular kendo-ui angular2-template kendo-ui-angular2 kendo-tooltip

我试图在一个容器类上显示工具提示,但是仅当字符串变量中填充了某些字符串时。目前,工具提示正在运行,并显示字符串变量中包含的文本。

<span kendoTooltip [tooltipTemplate]="tooltip" [title]="'Feed'">
<div class="container">
    <div class="row feed-container" (click)="feedClickEvent(feedItem)" *ngFor="let feedItem of feedRootObject.feeds">
        <div class="feed-item">
            <div class="col-sm-4 column-inlineBlock feed-avatar">
                <span>
                    <k-icon [icon]=" { type: 'image', src: '04.png', extraClass: 'feed-icon'}"></k-icon>
                </span>
            </div>
            <div class="col-sm-7 column-inlineBlock main-feed-content">
                <div class="title"><strong>{{feedItem.secondColumn.title}}</strong></div>
                <div class="description">{{feedItem.secondColumn.description}}</div>
                <div class="footer" *ngIf="!feedItem.secondColumn.footer.isTimeAgo">{{feedItem.secondColumn.footer.value}}</div>
                <div class="footer time-ago" *ngIf="feedItem.secondColumn.footer.isTimeAgo">
                    <k-icon [icon]="{type: 'fas', name: feedItem.secondColumn.footer.icon.icon, extraClass: 'icon-clock'}"></k-icon>
                    {{feedItem.secondColumn.value | timeAgo}}
                </div>
            </div>
            <div class="col-sm-1 column-inlineBlock third-col" *ngIf="!isTwoColumn">
                <div class="third-col-wrapper">
                    <span class="icon-indicator {{feedItem.thirdColumn.status}}">
                        <k-icon [icon]="{type: 'fas', name: feedItem.thirdColumn.kIcon.icon, extraClass: 'icon-number'}"></k-icon>
                </span>
                <span class="number-indicator">
                    <strong id="value-indicator">{{feedItem.thirdColumn.value}}</strong>
                </span>
                </div>
            </div>
        </div>
    </div>
</div>
</span>

    <ng-template #tooltip>
        <ng-container *ngIf="feedRootObject.tooltipText">
            {{feedRootObject.tooltipText}}
        </ng-container>
    </ng-template>

仅当'feedRootObject.tooltipText'中包含值时,如何显示工具提示?

1 个答案:

答案 0 :(得分:-1)

您应该执行以下操作: [tooltipTemplate] =“ feedRootObject.tooltipText?工具提示:“”

为我工作:)