当我按下 header 时，所有卡片都会展开。我从 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 来执行此卡片操作。

Bootstrap 假设，data-target 得到了应该是 opened/closed.

的卡的 ID

在您的示例中，每个按钮和卡片都有相同的 data-target/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/

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

When I press header , all cards expand. I have fetch data from API and need to show in a card list

html

angular

frontend

ngfor

card