Angular 8/9:如何使用插值设置数据父属性

Question

假设我有一个带有两个按钮的可折叠菜单，单击时会显示相应的内容。如果其中一个按钮已打开，则单击另一个按钮时该按钮应关闭。我想重复这个内容x次。

<div *ngFor="let item of array; let i = index" class="container" id="myGroup">
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
content 1
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2">
Content 2
</button>
</p>
<div class="collapse" id="collapseExample" data-parent="#myGroup">
<div class="card card-body">
Content 1 here 
</div>
</div>
<div class="collapse" id="collapseExample2" data-parent="#myGroup">
<div class="card card-body">
Content 2 here 
</div>
</div>
</div>

我希望具有类container的每个divs都有自己唯一的id，以与其内容的data-parent属性相匹配。类似这样的东西：

<div *ngFor="let item of array; let i = index" class="container" id="myGroup{{i}}">
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
content 1
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2">
Content 2
</button>
</p>
<div class="collapse" id="collapseExample" data-parent="#myGroup{{i}}">
<div class="card card-body">
Content 1 here 
</div>
</div>
<div class="collapse" id="collapseExample2" data-parent="#myGroup{{i}}">
<div class="card card-body">
Content 2 here 
</div>
</div>
</div>

我的目标是创建几个按钮，我可以在页面上打印x次。每次在页面上打印新的集合时，它的按钮将只响应其唯一的ids和data-parents。我像上面一样尝试了它，但出现了以下错误：Uncaught Error: Template parse errors: Can't bind to 'parent' since it isn't a known property of 'div'.

这可能吗？感谢您的帮助。

Answer 1

您应该使用[attr.data parent]来设置数据父属性。

在您的情况下[attr.data parent]="'#myGroup'+i">

Answer 2

使用attribute绑定语法而不是

例如

[attr.data-parent]="'#myGroup' + i"

你也可以检查条件，我给你一个例子链接

如何在Angular 2中添加条件属性？