时间戳

首页 > 解决方案 > 将变量值动态分配给 html 属性

angular - 将变量值动态分配给 html 属性

问题描述

我正在尝试创建一个按钮，单击该按钮将打开由控制器在变量中决定的某个模式，而不是仅具有多个具有相同属性但具有不同数据目标的按钮

所以这是我之前使用的按钮之一

      <button mat-menu-item class="menu-item" *ngIf="isReady"
              data-toggle="modal" data-target="#ready-modal">
        <span>View Ready</span>
      </button>

这就是我想出的

      <button mat-menu-item class="menu-item" data-toggle="modal"
        data-target="{{action.dataModalTarget}}" (click)="this[action.clickFunction](event)">
          <span>{{action.translationKey | translate}}</span>
      </button>

但是，这会引发以下异常，

Can't bind to 'target' since it isn't a known property of 'button'. ("      <button mat-menu-item class="menu-item" data-toggle="modal"

这甚至可行吗？

标签： angularangular-material

解决方案

您可以通过属性绑定来实现，就像绑定属性和事件一样，属性绑定的语法是：

[attr.<attribute_name>]="value"
[attr.data-target]="action.dataModalTarget"

参考：角度记录

推荐阅读