ngFor Angular 中的手风琴

Question

我有一个 ngFor 并且对于每个项目我都有一个按钮来显示一些额外的细节（我正在使用 bootstrap 手风琴）。我的问题是我只想打开关于当前项目的手风琴（不是全部）。

我将向您展示我对索引所做的尝试，但它不起作用。

那是我的 ngFor:

<ul *ngFor="let star of stars; index as i;">
...
</ul

这是我的按钮：

<button type="button" data-toggle="collapse" attr.[data-target]="'collapse' + i" aria-expanded="false"></button>

这是手风琴：

<div class="collapse" [id]="'collapse' + i">
<div class="card card-body">
...

这是我的错误：

ERROR DOMException: Failed to execute 'setAttribute' on 'Element': 'attr.[data-target]' is not a valid attribute name.

你能帮帮我吗？谢谢！

Answer 1

试试这个：

<div class="collapse" [attr.id]="'collapse' + i">

<button type="button" data-toggle="collapse" [attr.data-target]="'#collapse' + i" aria-expanded="false"></button>

如果这不是你想要的，那么最好有一个 stackblitz :-)

参见：Attribute, class, and style bindings

ngFor Angular 中的手风琴

Accordion in ngFor Angular

angular

bootstrap-4

accordion

ngfor