时间戳

首页 > 解决方案 > How to make binding between data-title attribute and text in an object

javascript - How to make binding between data-title attribute and text in an object

问题描述

for the below posted code, it is part of a template of an angular .ts file. i added data-title attribure so i can have a text like a tooltip when the button is hovered. the problem i have now is, the value i want to set to data-title can be obtained via binding and i would like to apply a pipe on that value. it is defined in the angular .ts file as follows:

"TOOLTIP":{
    "EDIT_TOPOGRAPHY": "Edit Topography"
}

something as follows_:

 data-title= {{ TOOLTIP.EDIT_TOPOGRAPHY | pipe}}

how can make binding between data-title attribute and the aforementione text in the object "TOOLTIP" and apply a pipe

code:

<button class="btn btn-sm btn-icon"  data-title= {{ | pipe}} (click)="editTopography()" data-tooltip="text"> <clr-icon shape="pencil"></clr-icon></button>

.ts file:

"TOOLTIP":{
    "EDIT_TOPOGRAPHY": "Edit Topography"
}

标签： javascriptangulartypescriptdata-binding

解决方案

只需换成data-title方括号[]

所以它看起来像这样

<button class="btn btn-sm btn-icon"  [attr.data-title]="variable | pipe" (click)="editTopography()" data-tooltip="text"> <clr-icon shape="pencil"></clr-icon></button>

您可以在此处阅读有关绑定语法的更多信息

在您的 TS 中，您没有声明可用于绑定的变量。要访问此变量，您应该在组件内部定义它。

打字稿代码

export class SomeComponent {
    public tooltip = {
       "TOOLTIP": {
         "EDIT_TOPOGRAPHY": "Edit Topography"
       }
    }
   ... 
}

然后你可以在你的 HTML 代码中访问它

<button class="btn btn-sm btn-icon"  [attr.data-title]="tooltip.TOOLTIP.EDIT_TOPOGRAPHY | pipe" (click)="editTopography()" data-tooltip="text"> <clr-icon shape="pencil"></clr-icon></button>

推荐阅读