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