Question

我在应用程序中使用@ ng-select / ng-select @ 2.3.6，数组中有很长的文本。

因此，完整的文本在下拉列表中不可见，因此我想在每个选项上显示标题/工具提示

我尝试过

let listArray = [{name: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s'}];

<ng-select placeholder="Select" (change)="onChange($event)">
      <ng-option *ngFor="let list of listArray" 
       title="{{list.name}}"> {{list.name}} </ng-option>
 </ng-select>

但是没有运气

Answer 1

您可以使用以下代码实现工具提示解决方案

<ng-select [items]="listArray" bindLabel="name" bindValue="name">
    <ng-template ng-option-tmp let-item="item">
    <div title="{{item.name}}">{{item.name}}</div>
    </ng-template>
</ng-select>

谢谢

Answer 2

您可以使用@ ng-bootstrap / ng-bootstrap库与ng-select并行显示工具提示：

模板：

<ng-select [ngbTooltip]="tipContent" container="body" placement="bottom" placeholder="Select" (change)="onChange($event)">
      <ng-option *ngFor="let list of listArray" title="{{list.name}}"> {{list.name}}  
     </ng-option>
</ng-select>

<ng-template #tipContent>{{listArray[0].name}}</ng-template>

ts：

listArray = [
    {name: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s"}
];

Demo

我添加了一个仅使用引导程序而没有外部库的演示。将鼠标悬停在选项上以查看工具提示（需要几秒钟才能显示出来）： New Demo

Answer 3

您可以将template放在<ng-option>内，并添加指令ng-option-tmp：

<ng-select [items]="listArrayManyElements" placeholder="Select" [(ngModel)]="Selected" 
           bindLabel="name" bindValue="name">
    <ng-template ng-option-tmp let-item="item">
        <div [title]="item.name">{{item.name}}</div>
    </ng-template>
</ng-select>

我已经更新了您的stackblitz

Answer 4

您可以这样创建自定义指令：

import { ContentChild, Directive, ElementRef, OnInit } from '@angular/core';
import { NgSelectComponent } from "@ng-select/ng-select";

@Directive({
selector: '[admSelectTitle]'
})

export class SelectTitleDirective implements OnInit {

@ContentChild(NgSelectComponent) select: NgSelectComponent;

@ContentChild(NgSelectComponent, { read: ElementRef }) selectNative: ElementRef;

/**
 * @inheritDoc
 */
ngOnInit() {
    if (!this.select) {
        return;
    }
    const nativeElement = this.selectNative.nativeElement;
    nativeElement.addEventListener("mouseover", function() {
        const listOfPickedElements = nativeElement.querySelectorAll('.ng-value-label.ng-star-inserted');
        listOfPickedElements.forEach((el) => {
            el.setAttribute('title', el.innerHTML);
        })

        const listOfAvailableOptions = nativeElement.querySelectorAll('.ng-dropdown-panel-items.scroll-host .ng-option.ng-option-marked');
        listOfAvailableOptions.forEach((v) => {
            v.setAttribute('title', v.innerText)
        })

    })
}
}

之后，您可以简单地使用它：

<ng-select admSelectTitle [items]="yourItems" bindLabel="name" bindValue="id" class="anyClass" formControlName="anyName" [multiple]="true">
                    <ng-template ng-option-tmp let-item="item">
                        {{ item.name }}
                    </ng-template>
                </ng-select>

现在在ng-select和ng-options元素上有工具提示。对不起，英语不好=）

Answer 5

<ng-select placeholder="Select" (change)="onChange($event)">
      <ng-option *ngFor="let list of listArray">
         <div title="{{list.name}}"> 
            {{list.name}}
         </div>
      </ng-option>
 </ng-select>

Answer 6

就我而言，问题的解决方案是将“FormsModule”添加到导入“NgSelectModule”的模块中

你的模块应该是这样的：

import { NgSelectModule } from '@ng-select/ng-select';
import { FormsModule } from '@angular/forms';
@NgModule({
  imports: [
FormsModule,
NgSelectModule,
]

Answer 7

就我而言，我使用 ngx-bootstrap 和 ng select。这是示例 enter image description here

<div>
  <ng-template #itemTol>
    {{getTooltips(items, value)}}
  </ng-template>
    <ng-select [items]="items" #ngitem[clearable]="false" [tooltip]="itemTol" [isDisabled]="ngitem.isOpen" bindLabel="text" bindValue="value" placeholder="Please select" name="sales_agent" formControlName="name">
    <ng-template ng-option-tmp let-item="item">
      <div [tooltip]="item.text" placement="bottom">{{item.text}}</div>
    </ng-template>
  </ng-select>
</div>

如何在@ ng-select / ng-select选项上显示工具提示

7 个答案: