Impossible de se lier à 'cible' car ce n'est pas une propriété connue de 'div'

Question

Je reçois cette erreur lors de l'implémentation de la fonction de réduction:

Erreur: Erreurs d'analyse du modèle: impossible de se lier à 'cible' car ce n'est pas une propriété connue de 'div'

app.component.html:

 <div *ngFor = "let ele of elements; let RowIndex = index">
    {{ele.name}} 
    <button data-toggle="collapse" 
            data-target="#demo{{RowIndex}}">Toggle
    </button>
    <div id="demo{{RowIndex}}" class="collapse">Lorem Ipsum</div>

</div>
 

Mais si j'utilise simplement data-target="#demo" , cela fonctionne très bien. Mais lorsque je lie {{RowIndex}} de son erreur d’affichage.

Answer 1

Vous avez manqué la liaison de propriété

 <button data-toggle="collapse" 
        [attr.data-target]="'#demo'+ RowIndex">Toggle
</button>


<button (click)="clickMe($event)">Toggle</button>

clickMe(value){
    value.srcElement.innerHTML="Clicked";

  }
 

Answer 2

Utilisez la syntaxe de liaison d'attribut d'angular.

Utilisez l'un des éléments suivants:

 <button data-toggle="collapse" 
        attr.data-target="#demo{{RowIndex}}">Toggle
</button>
 

ou

 <button data-toggle="collapse" 
        [attr.data-target]="'#demo' + RowIndex">Toggle
</button>
 

Answer 3

use property binding: attr.data-target = "{{votre-cible}}"