Angular：基于多个条件的多个 matToolTips

Question

我有多个条件和工具提示文本值，我想将它们应用于单个表值。根据条件，我们会说 A、B 和 C，我们会显示特定的工具提示文本。如果适用多个条件，我们将显示 A & B、B & C、A & C 或 A & B & C。我也只想在 getScorerToolTipText 返回值不等于“”时启用工具提示。这可以用 matTooltip 实现吗？

<ng-container matColumnDef="totalRuns">
     <th mat-header-cell *matHeaderCellDef>Runs</th>
         <td mat-cell *matCellDef="let scorer"
             matTooltipPosition="right"
             matTooltip = "{{this.getScorerTooltipText(scorer)}}"
             [matTooltipDisabled]="this.isTooltipDisabled"
             [class.alert-red]="!this.isTooltipDisabled"> {{scorer.runTotals}}</td>
         <td mat-footer-cell *matFooterCellDef> {{this.scoreTotals}} </td>
 </ng-container>

Answer 1

如果您的

getScorerTooltipText()

方法在特定情况下返回值

""

，您可以在

[matTooltipDisabled]

属性中添加一个条件，并与返回值进行比较：

<ng-container matColumnDef="totalRuns">
     <th mat-header-cell *matHeaderCellDef>Runs</th>
         <td mat-cell *matCellDef="let scorer"
             matTooltipPosition="right"
             matTooltip = "{{this.getScorerTooltipText(scorer)}}"
             [matTooltipDisabled]="this.isTooltipDisabled && getScorerTooltipText(scorer) === ''"
             [class.alert-red]="!this.isTooltipDisabled"> {{scorer.runTotals}}</td>
         <td mat-footer-cell *matFooterCellDef> {{this.scoreTotals}} </td>
 </ng-container>