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

Question

对于下面发布的代码，它是角.ts文件模板的一部分。我添加了数据标题attribure，这样我就可以在按钮悬停时有一个类似工具提示的文本。我现在的问题是，我想要设置为数据标题的值可以通过绑定获得，我想在这个值上应用一个管道。它在角.ts文件中定义如下：

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

follows_之类的东西

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

如何使数据标题属性与对象“工具提示”中的上述文本绑定并应用管道

码

<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>

您可以阅读有关绑定语法这里的更多信息。

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