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 }}的值

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

您要使用属性binding

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