Ajouter du HTML aux éléments dynamiques en utilisant angular2

Question

J'ai besoin d'ajouter un HTML dynamique en angulaire avec une boucle en boucle.

Comme je suis en train d'utiliser de la manière suivante, mais obtenir question

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

Alors essayez d'ajouter ce code, je reçois question suivante:

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

S'il vous plaît suggérer comment puis-je résoudre ce .

Merci.

Answer 1

Essayez ces données-cible

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

n'est pas html5 attributs, il est utilisé par bootstrap. Donc Angular vous donne une erreur à ce sujet. more detail

Answer 2

Essayez cette

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

Pour dire explicitement angulaire d'utiliser l'attribut obligatoire, utilisez plutôt au-dessus de code à l'aide attr