Angular Can'；t绑定到'；目标'；因为它不是'；t'的已知属性；分区'；

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

错误：模板分析错误：无法绑定到“目标”，因为它不是 “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>

{{ele.name}
切换
乱数假文

---

但如果我只是简单地使用

数据目标=“#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";

  }

切换
切换
单击我（值）{
value.srcielement.innerHTML=“单击”；
}

使用angular的属性绑定语法

使用以下选项之一：

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

Lorem ipsum dolor文本。。。。

angular中为什么需要数据属性的可能重复？我不明白。我希望当我在切换时单击按钮时，写在按钮上的文本“切换”可以更改。您想从组件或从何处更改？无论什么都是最简单的方法。我有两个选项“.ts”和“.html”。当你想处理它时，请告诉我将帮助/只是为了澄清，如果你事后编辑它，它不会被视为你答案的副本。这是你编辑之前我的答案，我不在乎。

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