当我按下标题时，所有卡片都展开.我已经从API获取数据，并且需要显示在卡列表中

Question

这里我已经附上了我的代码。只需展开我只按下的卡片，解决方案是什么？

<div *ngFor="let edsrecord of listofEDS">
<div class="available_data_sources_block" id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true"
aria-controls="collapseOne">
{{edsrecord.dataSources[0].ERPName.toString()}}
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf
moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea
proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim
aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
</div>

Answer 1

您没有指定，但从代码的外观来看，我认为您使用引导程序来执行此卡操作。

Bootstrap假设，数据目标获取应该打开/关闭的卡的id。

在您的示例中，每个按钮和卡片都有相同的数据目标/id组合。这就是你犯错误的原因。为了解决这个问题，每张卡都需要一个唯一的id。

这听起来可能很简单，但在为属性动态赋值时，我并没有让它发挥作用。

下面是一个工作示例https://stackblitz.com/edit/angular-ivy-eqskk3

首先是ngClass的一个变通方法。

在第二次尝试中，我使用jQuery完成了这项操作，就像文档中提供的bootstrap一样https://getbootstrap.com/docs/4.6/components/collapse/#via-javascript

如果你想让这个功能开箱即用，没有那么多麻烦，我建议你看看https://material.angular.io/components/expansion/