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

Question

我需要在in循环中添加动态HTML。

由于我试图以以下方式使用，但出现问题

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

data-target不是引导程序使用的html5属性。 所以Angular给你关于它的错误。 更多详情

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>

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