当我按下 header 时，所有卡片都会展开。我从 API 获取数据，需要显示在卡片列表中答案

【问题标题】：When I press header , all cards expand. I have fetch data from API and need to show in a card list当我按下 header 时，所有卡片都会展开。我从 API 获取数据，需要显示在卡片列表中
【发布时间】：2022-01-29 00:53:39
【问题描述】：

这里我附上了我的代码。什么是只扩展我只按的卡的解决方案？

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

【问题讨论】：

您好，感谢您为 SO 做出贡献。查看How do I ask a good question? 上的本指南请提供更多详细信息以及与该问题相关的 .ts 和 .css 部分
嗨，这个问题没有ts和css

标签： html angular frontend ngfor card

【解决方案1】：

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

Bootstrap 假设 data-target 获取应该打开/关闭的卡的 id。

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

这听起来很简单，但是在为属性动态分配值时，我没有让它工作。

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

首先使用 ngClass 的解决方法。

在第二次尝试中，我使用了 jQuery，就像文档 https://getbootstrap.com/docs/4.6/components/collapse/#via-javascript 中提供的引导程序一样

如果您想开箱即用此功能而没有太多麻烦，我建议您查看https://material.angular.io/components/expansion/

【讨论】：