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

Question

实现折叠功能时出现此错误:

错误:模板解析错误:无法绑定到'target',因为它不是'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>