嵌套组件中带有注入变量的 Angular4 和 data-* 属性

Question

在 Angular4 的嵌套组件中有以下代码：

<a data-activator="classroom-panel-activator"
           data-toggle="collapse"
           data-parent="#accordion-{{ day.date }}"
           href="#info-panel-{{ schedule.referenceId }}"
           >
            Click me
</a>

问题出在 data-parent 及其值 {{ day.date }} 上，因为当我运行浏览器中的代码时， Angular 抛出以下内容：

Can't bind to 'parent' since it isn't a known property of 'a'. ("       <a data-activator="classroom-panel-activator"

       data-toggle="collapse"

       [ERROR ->]data-parent="#accordion-{{ day.date }}"

       href="#info-panel-{{ schedule.referenceId }}"

当变量被注入到 data-* 属性时，问题才真正发生。如果我从中删除 {{ day.date }} ，那么它就可以工作。另外，如果我离开 {{ day.date }} 并且例如将名称从 data-parent 更改为 data-nothing 然后错误仍然发生（所以它不是与任何关键字 parent 的名称冲突）。

当然 {{ day.date }} 对象存在并且有效。它只是在我描述的场景中不起作用。

那么问题是什么？

Answer 1

您想使用属性绑定

<a data-activator="classroom-panel-activator"
           data-toggle="collapse"
           [attr.data-parent]="'#accordion-' + day.date"
           href="#info-panel-{{ schedule.referenceId }}"
           >
            Click me
</a>

嵌套组件中带有注入变量的 Angular4 和 data-* 属性

Angular4 and data-* attributes with injected variable in nested Component

custom-data-attribute

typescript

angular