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

Posted 2023-03-24

【中文标题】无法绑定到“目标”，因为它不是“div”的已知属性

【英文标题】：Can't bind to 'target' since it isn't a known property of 'div'

【发布时间】：2017-09-09 05:46:57

【问题描述】：

我在实现折叠功能时收到此错误：

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

app.component.html：

<div *ngFor = "let ele of elements; let RowIndex = index">
    ele.name 
    <button data-toggle="collapse" 
            data-target="#demoRowIndex">Toggle
    </button>
    <div id="demoRowIndex" class="collapse">Lorem Ipsum</div>

</div>

但如果我只是使用 data-target="#demo" ，那就可以了。但是当我绑定RowIndex 时，它会显示错误。

【问题讨论】：

Angular 2 data attributes的可能重复

为什么需要 Angular 中的数据属性？

【参考方案1】：

你错过了属性绑定

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


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

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

  

【讨论】：

我没找到你。详细说明

我希望写在按钮上的文本“切换”在切换时单击按钮时会发生变化。

你想从组件还是从哪里改变？

最简单的方法。我有两个选项 '.ts' 和 '.html' 。

当你想处理它请告诉我会帮忙/

【参考方案2】：

使用 Angular 的属性绑定语法。

使用以下方法之一：

<button data-toggle="collapse" 
        attr.data-target="#demoRowIndex">Toggle
</button>

或

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

【讨论】：

为了清楚起见，如果您事后编辑它，它不会被视为您的答案的重复。这是我在您编辑之前的回答，我不在乎。

【参考方案3】：

使用属性绑定： attr.data-target="your-target"

【参考方案4】：

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

<div class="card" *ngFor="let service of servicesArr;let i = index">
  <a data-toggle="collapse" href="#iservice.name">service.label</a>
  <div id="iservice.name" class="collapse">
     Lorem ipsum dolor text....
  </div>
</div>

【参考方案5】：

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

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。