Angular mat-tooltip 调用函数

Question

我想从按钮工具提示中调用一个方法 selections() ，该方法执行某些操作并返回一个需要在悬停工具提示时显示的字符串。我尝试在 html 上插入返回值，但没有用

应用程序组件.html

<button mat-raised-button
      matTooltip={{selections()}}
      matTooltipClass = "test"
      aria-label="Button that displays a tooltip when focused or hovered 
      over">
Action
</button>

字符串“selected”需要从函数返回并在悬停工具提示时显示

app.component.ts

selections() {
this.selectedelems = [];
this.selection.selected.map(id => this.tableData.data.filter((row: any) => 
{
  if (row._id === id) {
    this.selectedelems.push(row.name);
    this.selected = this.selectedelems.join('\r\n');
    }
}));
return this.selected;
}

Answer 1

您需要通过属性绑定使用模板表达式。以下应该调用您的方法并接收返回的字符串。

<button mat-raised-button
      [matTooltip]="selections()"
      matTooltipClass = "test"
      aria-label="Button that displays a tooltip when focused or hovered 
      over">
Action
</button>

以下链接是有关模板表达式的信息

https://angular.io/guide/template-syntax#template-expressions

以下链接是有关属性绑定的信息

https://angular.io/guide/template-syntax#property-binding

请注意：

虽然这也是通过组件方法填充工具提示的可行解决方案，但根据下面的评论，这不是这个问题的根本问题，插值也适用于这种情况。 matTooltip="{{selections()}}"