Angular *ngFor中的Mat工具提示

如何动态显示和隐藏材质设计工具提示？ 我有一个显示工具提示int*ngFor的组件

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

我有一个按钮，用于处理更改时显示/隐藏工具栏，但如何显示和隐藏这些工具栏

在doc中，有一个使用一个工具栏的示例：

 <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的多个工具提示？

使用

@ViewChildren

获取所有工具提示的引用。要取消工具提示的默认“行为”，请将禁用

matTooltipDisabled

属性设置为属性。该属性值应该通过点击按钮触发，或者在

input

上的

mousemove

上触发工具提示或包装

div

。 在显示工具提示之前，您还需要一个超时来计数器时钟AM超时

类型脚本：

import { ViewChildren } from '@angular/core';
...
@ViewChildren('tooltip') tooltips;
...
  showAllTooltips() {
    this.show = !this.show;
    if (this.show) {
      setTimeout(() => {
        this.tooltips._results.forEach(item => item.show())
      }, 5); tooltip pop
    } else {
        this.tooltips._results.forEach(item => item.hide());
    }
  }

HTML：

<div (mousemove)="show=false" *ngFor="let item of items; let i=index">
    <mat-form-field [matTooltipDisabled]="!show" matTooltip="{{item.comment}}" #tooltip="matTooltip">
        <input matInput>
    </mat-form-field>
</div>
<button mat-raised-button (click)="showAllTooltips()"> Show / hide all tooltips </button>

显示/隐藏所有工具提示

---

使用材料提供的属性来显示/隐藏工具提示，并管理这些提示的位置。使用

@ViewChildren

一次单击即可显示/隐藏所有工具提示

切换工具提示

---

每个工具提示都有一个按钮吗？@Vega所有工具提示都有一个按钮如何区分应该弹出哪个工具提示？@Vega togging按钮应该一次显示所有工具提示，然后一次关闭所有工具提示。类似于“显示/隐藏注释”的东西如果你知道我的意思这看起来真的很好，我将实现这一点，如果工作给你“正确答案”，你知道阻止隐藏/显示悬停工具提示的任何解决方案吗？所以，如果我单击->showAllTooltips，所有工具提示都会显示，但当我悬停在垫子上时，工具提示不会隐藏？