Angular mat-tooltip 调用函数答案

【问题标题】：Angular mat-tooltip calling a functionAngular mat-tooltip 调用函数
【发布时间】：2019-04-24 12:34:54
【问题描述】：

我想从按钮工具提示中调用一个方法 selections()，它会做一些事情并返回一个需要在悬停工具提示时显示的字符串。我尝试在 html 上插入返回值，但没有成功

app.component.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;
}

【问题讨论】：

您的selections 函数实际上并没有返回值——您只是从filter 函数返回
而不是 {{ }} 如果你这样做会更好 [matTooltip]="selections()"
@JBoothUA 我也试过了..仍然没有帮助
@user184994 太棒了！成功了
@use184994 如果您想将您的评论转换为答案，我将接受它作为答案。谢谢

标签： angular typescript angular-material

【解决方案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

请注意：

虽然这也是通过以下方式填充工具提示的可行解决方案组件方法，根据下面的 cmets 这不是根本问题这个问题和插值在这种情况下会起作用也是。 matTooltip="{{selections()}}"

【讨论】：

它也适用于字符串插值。我错过的是我没有从 selections() 返回，而是从 filter() 返回
你是对的，插值有效，这个答案不是根本问题，你想让我删除这个答案吗？
我在这个答案上放了注释，以澄清未来的读者，因为我收到了 2 张赞成票；没想到你会接受它作为答案。如果@user184994 想隐蔽评论来回答，请接受该答案，因为在这种情况下它应该真正被标记为正确答案。