如何在鼠标悬停时显示所有文本

Question

我有一个选择从api返回一些选项，问题是一些选项大于文本框，不显示所有的文本给用户

<div class="form-group my-4">
<label class="mb-1">{{'Área_de_Interesse' | translate}}</label>
<ng-select [multiple]="false" name="areaInteresse" placeholder="Selecione" formControlName="areaInteresse">
<ng-option *ngFor="let item of areasDeInteresse" [value]="item">{{ item.nomeAreaInteresse }}</ng-option>
</ng-select>
</div>

当用户将鼠标悬停在选项上时，我需要以某种方式显示所有文本，我试图循环遍历选项并将它们的值传递给一个变量:"optionName">

teste(){
this.dominioService.buscarAreaInteresse().subscribe((data: any) => {
this.areasDeInteresse = data;
this.areasDeInteresse = this.areasDeInteresse.filter(x => x.ativo == true);
for (var i = 0; i < data.length; i++) {
this.optionName[i] = data[i].nomeAreaInteresse;
console.log(this.optionName)
}
});
}

但是我仍然不知道如何个性化每个选项以及如何使它们在鼠标超过

时完整显示。

Answer 1

<ng-select [items]="areasDeInteresse" 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

就像这样，你可以选择你的选项，它将出现在你的文本框

<div class="form-group my-4">
<label class="mb-1">{{'Área_de_Interesse' | translate}}</label>
<ng-select [multiple]="false" name="areaInteresse" placeholder="Selecione" formControlName="areaInteresse">
<ng-option *ngFor="let item of areasDeInteresse" title="{{item.nomeAreaInteresse}}" [value]="item"> <span [title]="item.nomeAreaInteresse">{{item.nomeAreaInteresse}}</span> </ng-option>
</ng-select>
</div>