Question

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

错误：模板解析错误：无法绑定到'target'，因为它不是a 已知的'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}}而不是显示错误时。

Answer 1

你错过了财产绑定

<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

使用angular的属性绑定语法。

使用以下其中一项：

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

或

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

Answer 3

使用属性绑定： attr.data-target =“ {{您的目标}}”

Answer 4

您可以使用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>

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

4 个答案: