web-dev-qa-db-fra.com

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

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

Erreur: Erreurs d'analyse de modèle: Impossible de se lier à 'cible' car ce n'est pas un 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 bien. Mais quand je lie {{RowIndex}} que son erreur d'affichage.

angularcollapse
27
Er Vipin Sharma

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

  }
72
Aravind

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

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

0
Achraf Farouky