manipular - pasar parametros entre componentes angular 4

No se puede enlazar a ''target'' ya que no es una propiedad conocida de ''div''

Question

Recibo este error al implementar la función de colapso:

Error: errores de análisis de la plantilla: no se puede enlazar con ''target'' ya que no es una propiedad conocida 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>

Pero si simplemente uso data-target="#demo" , está funcionando bien. Pero cuando estoy {{RowIndex}} que está mostrando un error.

Answer 1

Te perdiste el enlace de la propiedad

<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

Utilice la sintaxis de enlace de atributo de angular.

Utilice uno de los siguientes:

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

o

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

Answer 3

usar enlace de propiedad: attr.data-target = "{{your-target}}"