时间戳

首页 > 解决方案 > 在角度 5 中使用 ng-select 时如何添加工具提示？

angular - 在角度 5 中使用 ng-select 时如何添加工具提示？

问题描述

我在下拉列表中使用了 ng-select，当用户将鼠标悬停在下拉列表上时，它应该显示工具提示。 代码：

<label>Grouping</label>
  <ng-select [items]="accounts"
            bindLabel="name"
            bindValue="name"
            groupBy="country"
            [(ngModel)]="selectedAccount">
  </ng-select>

零件

 accounts = [
    { name: 'Adam', email: 'adam@email.com', age: 12, country: 'United States' },
    { name: 'Samantha', email: 'samantha@email.com', age: 30, country: 'United States' },
    { name: 'Amalie', email: 'amalie@email.com', age: 12, country: 'Argentina' },
    { name: 'Estefanía', email: 'estefania@email.com', age: 21, country: 'Argentina' },
    { name: 'Adrian', email: 'adrian@email.com', age: 21, country: 'Ecuador' },
    { name: 'Wladimir', email: 'wladimir@email.com', age: 30, country: 'Ecuador' },
    { name: 'Natasha', email: 'natasha@email.com', age: 54, country: 'Ecuador' }
   
];

注意： 我需要 ng-select 下拉列表中的工具提示。

我尝试使用title属性，但它不起作用。

例子：

当用户将鼠标悬停在下拉列表上时，需要显示 ToolTip。

问题

如何使用 angular5 在 ng-select 中添加提示？

你的建议对我会有帮助。

标签： angular

解决方案

您可以使用 ng-template 来实现这一点 

<ng-select [items]="accounts"
                bindLabel="name"
                bindValue="name"
                groupBy="country"
                [(ngModel)]="selectedAccount">

        <ng-template ng-option-tmp let-item="item">
        <div title="{{item.name}}">{{item.name}}</div>
        </ng-template>
    </ng-select>

推荐阅读