无法绑定到“ target”，因为它不是“ div”的已知属性

我在实现崩溃特性时得到了这个错误:

错误: 模板解析错误: 无法绑定到“ target”，因为它不是 “ div”的已知属性

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>

但是如果我仅仅使用 data-target="#demo"，那么就可以很好地工作。但是当我绑定 {{RowIndex}}比它显示错误。

77409 次浏览
小开
最佳答案

你错过了属性绑定

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




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


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


}
小开

使用棱角的属性绑定语法。

使用下列其中之一:

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

或者

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

使用属性绑定: Data-target = “\{\{ your-target }}”

小开

你可以使用 href 标签代替 div。你可以检查下面的代码

<div class="card" *ngFor="let service of servicesArr;let i = index">
<a data-toggle="collapse" href="#\{\{i}}\{\{service.name}}">\{\{service.label}}</a>
<div id="\{\{i}}\{\{service.name}}" class="collapse">
Lorem ipsum dolor text....
</div>
</div>
小开 
<ng-container matColumnDef="opciones">


<th mat-header-cell *matHeaderCellDef> Opciones </th>
<td mat-cell *matCellDef="let item" class="text-center" role="button">
<a [routerLink]="['/panel/clientes',item._id]" matTooltip="Editar"><i class="bi bi-pencil-square"></i></a>&nbsp;
<a role="button" data-bs-toggle="modal" href="#delete-\{\{item._id}}" matTooltip="Borrar"><i class="bi bi-trash-fill"></i></a>
  

<!-- Modal -->
<div class="modal fade"  id="delete-\{\{item._id}}" tabindex="-1" aria-hidden="true">
....**strong text**
</div>


</td>
</ng-container>

提交答案