时间戳

首页 > 解决方案 > 如何根据条件悬停matoptions时显示工具提示？

html - 如何根据条件悬停matoptions时显示工具提示？

问题描述

<mat-select class="dropBox" placeholder="Select One" (selectionChange)="mymethod($event.value)" style="background-color:#FFFFFF;">
                    <mat-option *ngFor="let option of myList" [value]="option" matTooltip="{{option}}>
                             {{option}}
                     </mat-option>
       </mat-select>

我想为 myList 中的一些选项而不是全部显示工具提示。请帮忙谢谢。

标签： htmlcssangular

解决方案

假设您有以下数组：

foods: Food[] = [
{value: 'steak-0', viewValue: 'Steak'},
{value: 'pizza-1', viewValue: 'Pizza', tooltip: "hey"},
{value: 'tacos-2', viewValue: 'Tacos'}
];

然后在你的选择

 <mat-select>
  <mat-option  *ngFor="let food of foods"
    [value]="food.value"
    [matTooltip]="food.tooltip"
  >
    {{food.viewValue}}
  </mat-option>

推荐阅读