如何在对象中的数据标题属性和文本之间进行绑定

Question

对于下面发布的代码，它是 Angular .ts 文件模板的一部分。 我添加了数据标题属性，所以当按钮悬停时我可以有一个像工具提示这样的文本。 我现在遇到的问题是，我想设置为 data-title 的值可以通过绑定获得，我想在该值上应用一个管道。它在 angular .ts 文件中定义如下：

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

如下_：

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

如何在数据标题属性和对象“TOOLTIP”中的前面提到的文本之间进行绑定并应用管道

代码：

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

.ts 文件：

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

Answer 1

只需将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>

你可以阅读更多关于绑定语法here

在您的 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>