angular - *ngFor 中的 Mat-Tooltips

Question

如何动态显示和隐藏 Material Design 工具提示？我有显示工具提示的组件 int *ngFor

<div *ngFor="let item of items" fxLayout="row">
        <mat-form-field matTooltip="{{item.comment}}">
          <input matInput>
        </mat-form-field>
</div>

我有按钮，可以在更改时处理显示/隐藏工具栏，但是如何显示和隐藏这些工具栏？

在文档中有使用一个工具栏的示例:

 <button mat-raised-button (click)="tooltip.show()"> Show tooltip </button>

<span matTooltip="This is the tooltip message" #tooltip="matTooltip">
  I have a tooltip
</span>

这很简单，但是如何处理来自 *ngFor 的多个工具提示呢？

Answer 1

使用 Material 提供的属性来显示/隐藏工具提示并管理它们的位置。使用 @ViewChildren 可以一键显示/隐藏所有工具提示。

<div (mouseover)="tooltipStatus=true" *ngFor="let item of fieldsData; let i=index">
    <mat-form-field 
    [matTooltipDisabled]="!tooltipStatus" 
    matTooltip="{{item.tooltip}}"
    matTooltipPosition='right'
    #tooltip="matTooltip">
    <!-- possible value for position 'above|below|left|right' -->

        <input matInput [value]="item.value">
    </mat-form-field>
</div>

<button mat-raised-button (click)="toggleTooltips()"> Toggle Tooltips </button>

See code on StackBlitz