如何在*ngFor中动态显示和隐藏Material Design工具提示？

我来帮你解决这个批量切换工具提示的问题，这里有两种实用的方法，你可以根据需求选择：

方法一：通过matTooltipDisabled属性（推荐，最简单） #

这种方法直接利用Angular Material提供的内置属性，不需要操作DOM实例，非常简洁。

步骤1：在组件类中定义控制变量 #

在你的组件.ts文件里添加一个布尔变量，用来控制所有工具提示的启用状态：

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  items = [/* 你的数据数组 */];
  // 控制工具提示是否可见（默认启用）
  isTooltipEnabled = true;
}

步骤2：修改模板绑定属性 #

在*ngFor循环的mat-form-field上添加[matTooltipDisabled]绑定，把它和我们定义的变量关联起来：

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

<!-- 切换按钮 -->
<button mat-raised-button (click)="isTooltipEnabled = !isTooltipEnabled">
  {{ isTooltipEnabled ? '隐藏所有工具提示' : '显示所有工具提示' }}
</button>

原理：matTooltipDisabled为true时，工具提示会被禁用（鼠标hover也不会触发）；反之则正常工作。我们通过切换isTooltipEnabled的值来批量控制所有工具提示的状态。

方法二：通过ViewChildren获取所有工具提示实例（适合精细控制） #

如果你需要更灵活的操作（比如主动触发显示/隐藏，而不是依赖hover），可以用这种方法获取所有工具提示的实例，然后调用它们的方法。

步骤1：在模板中添加模板引用变量 #

给每个带matTooltip的元素添加一个模板引用（比如#tooltip）：

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

<!-- 切换按钮 -->
<button mat-raised-button (click)="toggleTooltips()">
  {{ isTooltipVisible ? '隐藏所有工具提示' : '显示所有工具提示' }}
</button>

步骤2：在组件类中获取并控制实例 #

导入ViewChildren和MatTooltip，然后获取所有实例并实现切换逻辑：

import { Component, ViewChildren, QueryList } from '@angular/core';
import { MatTooltip } from '@angular/material/tooltip';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  items = [/* 你的数据数组 */];
  isTooltipVisible = true;

  // 获取所有带#tooltip引用的MatTooltip实例
  @ViewChildren('tooltip') tooltips!: QueryList<MatTooltip>;

  toggleTooltips() {
    this.isTooltipVisible = !this.isTooltipVisible;
    
    // 遍历所有工具提示实例，调用对应的方法
    this.tooltips.forEach(tooltip => {
      if (this.isTooltipVisible) {
        tooltip.show();
      } else {
        tooltip.hide();
      }
    });
  }
}

注意：这种方法是主动控制工具提示的显示/隐藏状态，但如果需要完全禁用hover触发的行为，建议结合matTooltipDisabled属性一起使用。

内容的提问来源于stack exchange，提问作者Maciej Wojcik