无法绑定到 'target',因为它不是 'div' 的已知 属性
Can't bind to 'target' since it isn't a known property of 'div'
我在实现折叠功能时遇到此错误:
Error: Template parse errors: Can't bind to 'target' since it isn't a
known property of '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>
但如果我只是使用 data-target="#demo"
,那工作正常。但是当我绑定 {{RowIndex}}
而不是显示错误时。
您错过了 属性 绑定
<button data-toggle="collapse"
[attr.data-target]="'#demo'+ RowIndex">Toggle
</button>
<button (click)="clickMe($event)">Toggle</button>
clickMe(value){
value.srcElement.innerHTML="Clicked";
}
使用 angular 的属性绑定语法。
使用以下之一:
<button data-toggle="collapse"
attr.data-target="#demo{{RowIndex}}">Toggle
</button>
或
<button data-toggle="collapse"
[attr.data-target]="'#demo' + RowIndex">Toggle
</button>
使用 属性 绑定:
attr.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>
<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>
我在实现折叠功能时遇到此错误:
Error: Template parse errors: Can't bind to 'target' since it isn't a known property of '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>
但如果我只是使用 data-target="#demo"
,那工作正常。但是当我绑定 {{RowIndex}}
而不是显示错误时。
您错过了 属性 绑定
<button data-toggle="collapse"
[attr.data-target]="'#demo'+ RowIndex">Toggle
</button>
<button (click)="clickMe($event)">Toggle</button>
clickMe(value){
value.srcElement.innerHTML="Clicked";
}
使用 angular 的属性绑定语法。
使用以下之一:
<button data-toggle="collapse"
attr.data-target="#demo{{RowIndex}}">Toggle
</button>
或
<button data-toggle="collapse"
[attr.data-target]="'#demo' + RowIndex">Toggle
</button>
使用 属性 绑定: attr.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>
<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>