Angular 如何在ngFor循环中添加手风琴项目？

我想动态手风琴项目在角度，我从API响应得到。 这是我的手风琴html：

                        <div id="accordion" class="custom-accordion">
                            <div class="card" *ngFor="let notification of Notification; let i=index;">
                                <div class="card-header" [attr.id]="'heading' + i">
                                    <h5 class="mb-0">
                                        <button class="btn btn-link " 
                                            data-toggle="collapse"
                                            [attr.data-target]="'#collapseItem' + i"
                                            aria-expanded="true"
                                            [attr.aria-controls]="'collapseItem' + i">
                                            Notification
                                            <i aria-hidden="true" class="fa fa-angle-up ">&nbsp;</i>
                                        </button>
                                    </h5>
                                </div>

                                <div [attr.id]="'collapseItem' + i" class="collapse show"
                                    [attr.aria-labelledby]="'heading' + i"
                                    data-parent="#accordion">
                                    <div class="card-body">
                                        {{ notification.quote }}
                                    </div>
                                </div>
                            </div>
                        </div>

通知
{{notification.quote}

现在，问题是每个手风琴都有相同的id。如果我打开一个手风琴，所有其他的手风琴都会打开&关闭时也会发生同样的情况。

---

请帮助..

根据索引使用不同的ID以使其工作

<div id="accordion" class="custom-accordion">
    <div class="card" *ngFor="let notification of Notification; let i=index;">
        <div class="card-header" id="headingOne">
            <h5 class="mb-0">
                <button class="btn btn-link " 
                    data-toggle="collapse"
                    [data-target]="'#collapse'+i"
                    aria-expanded="true"
                    aria-controls="collapseOne">
                {{ notification.title }}
                <i aria-hidden="true" class="fa fa-angle-up ">&nbsp;</i>
                </button>
            </h5>
        </div>
        <div [id]="'collapse'+i" class="collapse show"
            aria-labelledby="headingOne"
            data-parent="#accordion">
            <div class="card-body">
                {{ notification.body }}
            </div>
        </div>
    </div>
</div>

{{notification.title}}
{{notification.body}

添加属性。为了让它起作用 `

{{notification.title}}
{{notification.body}
`

这里有什么问题？

…

你试过这个吗？问题是每个手风琴都有相同的id。如果我打开一个手风琴，所有其他手风琴都会打开&同样关闭。好吧，我走到一半。请参见顶部编辑的问题。但是aria expanded=“true”使每个手风琴项目都打开了。当一个手风琴项目打开时，有人能帮我将其设置为false吗？您使用的是哪个版本的引导程序？它是ngx引导程序“^5.2.0那么您不应该使用ngx引导程序中的“手风琴”组件而不是普通的css手风琴吗？我的意思是这样的？因此，您不需要使用aria和数据属性。这将使事情变得简单得多。

<div id="accordion" class="custom-accordion">
    <div class="card" *ngFor="let notification of Notification; let i=index;">
        <div class="card-header" id="headingOne">
            <h5 class="mb-0">
                <button class="btn btn-link " 
                    data-toggle="collapse"
                    [attr.data-target]="'#collapse'+i"
                    aria-expanded="true"
                    aria-controls="collapseOne">
                {{ notification.title }}
                <i aria-hidden="true" class="fa fa-angle-up ">&nbsp;</i>
                </button>
            </h5>
        </div>
        <div [attr.id]="'collapse'+i" class="collapse show"
            aria-labelledby="headingOne"
            data-parent="#accordion">
            <div class="card-body">
                {{ notification.body }}
            </div>
        </div>
    </div>
</div>`