使用angular2将HTML添加到动态元素中

Question

我需要在angular中添加动态html和in循环。

正如我试图使用以下方式，但得到问题

<div class="reseipt panel panel-default" *ngFor="let goal of goals">
<p class="panel-heading" data-toggle="collapse" data-target="
{{'#collapse-'+ goal.Id}}">
Goal - {{goal.Description}} {{goal.Id}}
</p>

在尝试添加此代码时，我遇到了以下问题：

Can't bind to 'target' since it isn't a known property of 'p'. ("ult" *ngFor="let goal of goals">

请建议我如何解决此问题。

谢谢。

Answer 1

试试这个

<div class="reseipt panel panel-default" *ngFor="let goal of goals">
<p class="panel-heading" data-toggle="collapse" 
[attr.data-target]="'#collapse-'+ goal.Id"> Goal - {{goal.Description}} {{goal.Id}}</p>

要明确地告诉Angular使用属性绑定，请使用上面使用attr的代码

Answer 2

试试这个

<div class="reseipt panel panel-default" *ngFor="let goal of goals">
<p class="panel-heading" data-toggle="collapse" 
[attr.data-target]="'#collapse-'+ goal.Id">Goal - {{goal.Description}} {{goal.Id}}</p>

数据目标不是html5属性，而是由引导程序使用的。所以Angular给了你关于它的错误。更多细节