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

【问题标题】：Add HTML to dynamic elements using angular2使用 angular2 将 HTML 添加到动态元素
【发布时间】：2018-02-10 03:15:43
【问题描述】：

我需要在循环中以角度附加动态 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">

请建议我如何解决这个问题。

谢谢。

【问题讨论】：

我无法理解您的标题，即“将 HTML 添加到动态元素”。

标签： html angular angular2-template angular2-forms angular2-directives

【解决方案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给你错误。 more detail

【讨论】：

Angular 从数据目标中剪切数据，这是因为它抱怨目标属性
感谢您的回复，它对我来说很好 [attr.data-target]="'#collapse' + goal.Id"。

【解决方案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

【讨论】：