如何在 mat tooltip angular 中添加静态文本和动态变量？

Question

如何在 mat 工具提示中添加静态文本和动态变量angular？

<span class="trim" [matTooltip]="Updated at test.updated by test.updated_at.name" > {{test.created_by.email}}</span>

任何帮助将不胜感激。

Answer 1

像这样：

<span class="trim" [matTooltip]="'Updated at test.updated by ' + test.updated_at.name" > {{test.created_by.email}}</span>

当你把matTooltip放在方括号中时，意味着你可以使用javascript表达式。

它叫做属性绑定 - http://angular.io/guide/property-binding

Answer 2

基本上你可以调用 matTooltip 中的函数，如下所示

<span class="trim" [matTooltip]="itemtooltiptext()" > {{test.updated_at.name}}</span>

打字稿

test: any = {
    updated: "updated",
    updated_at: {
      name: "errorau"
    }
  };

  itemtooltiptext() {
    return `Updated at ${this.test.updated} by ${this.test.updated_at.name}`;
  }

demo

如何在 mat tooltip angular 中添加静态文本和动态变量？

How can I add both static text and dynamic variable in mat tooltip angular?

tooltip

angular-material

angular