Angular4和data

Angular4和data- *属性在嵌套Component中注入变量(Angular4 and data-* attributes with injected variable in nested Component)

在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 }} ，那么它就可以了。 此外，如果我离开{{ day.date }}并且例如将名称从data-parent更改为data-nothing那么错误仍然存​​在（因此它与任何关键字parent没有名称冲突）。

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

那么问题是什么呢？

Inside the nested Component of Angular4 have the following piece of code:

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

The problem is with data-parent and its value of {{ day.date }} because when I ran the code in the browser, Angular throws the following:

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

The problem really occurrs when the variable is injected into a data-* attribute. If I remove {{ day.date }} from it, then it works. Also, if I leave the {{ day.date }} and e.g. change the name from data-parent to data-nothing then error still occurrs (so it's not kind of name conflict with any keyword parent).

Of course {{ day.date }} object exists and works. It's just does not work in the scenario I have described.

So what is the problem then?

最满意答案

您想使用属性绑定

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

You want to use attribute binding

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