使用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代替