使用 ngFor 循环的索引动态设置 class 或 id

Question

所以我正在尝试使用 Angular 在 Bootstrap 4 中创建折叠（手风琴）。我希望能够使用 ngFor 循环创建几乎所有的东西。

到目前为止我有这个：

<div class="row">
  <div class="col-lg-6">
    <div id="accordion" role="tablist" aria-multiselectable="true">
      <div class="card" *ngFor="let environment of environments; let i = index;">
        <div class="card-header" role="tab" id="headingi">
          <h5 class="mb-0">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapsei" aria-expanded="false" aria-controls="collapsei">
              Number: {{i}}
            </a>
          </h5>
        </div>

        <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
          <div class="card-block">
            <div *ngFor="let name of uniqueNames; let j = index" class="card infoBox">
              <p>this is accordion {{i}}, section: {{j}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

我想做的是使用 "let i = index" 设置 id 和 class 所需的名称，以使手风琴在单击某些链接时知道要做什么。所以理想情况下，第一个手风琴部分将具有 class 和 collapse0/heading0 的 id，下一个将具有 collapse1/heading1 的 id 和 class 等

但是，之前的代码一定不能正常工作，因为所有手风琴及其 headers 都会显示出来，但在单击时什么都不做。它确实生成了正确的数字，显示了所有正确的headers，以及与之关联的身体。

有什么帮助吗？谢谢！

Answer 1

你只需要数据绑定 id:

<div class="card-header" role="tab" [id]="'heading'+i">
<!-- and -->
<div [id]="'collapse' + i" class="collapse show" role="tabpanel" [aria-labelledby]="'heading' + i">

然后您可以通过i访问您的索引。

Answer 2

你也可以这样做

id="collapse{{i}}" class="heading{{i}}" attr.aria-controls="heading{{i}}"

以及 aria- 属性在 angular 中以另一种方式处理的事实，您必须在它们前面加上 attr. 前缀。在你的例子中应该是 attr.aria-controls="heading{{i}}".

Answer 3

*这是使用 bootstrap 5 手风琴的工作代码 ngFor Angular 12（动态 ID）：

<div class="accordion" id="accordionPanelsStayOpenExample">
        <div class="accordion-item">
          <h2 class="accordion-header" id="panelsStayOpen-headingOne">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
                Installed Offer Version Details
            </button>
          </h2>
          <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show" aria-labelledby="panelsStayOpen-headingOne">
            <div class="accordion-body">
                <ng-container *ngFor="let lineItem of allLineItems">
                    <!-- <line-item-detail [lineItem]="lineItem"></line-item-detail>-->
                        <div class="accordion-item my-4">
                            <h2 class="accordion-header" id="heading{{lineItem.id}}">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse" attr.data-bs-target="#collapse{{lineItem.id}}" aria-expanded="true" attr.aria-controls="collapse{{lineItem.id}}">
                                    {{lineItem.productType}} : {{lineItem?.productOffering?.name}}
                                </button>
                            </h2>
                            <div id="collapse{{lineItem.id}}" class="accordion-collapse collapse show" attr.aria-labelledby="heading{{lineItem.id}}">
                                <div class="accordion-body">
                                    your body text
                                </div>
                            </div>
                        </div>
               </ng-container>
            </div>
          </div>
        </div>
    </div>

甚至你可以创建 ngFor 中的子组件，就像我评论 <line-item-detail></line-item-detail> 标签一样。

使用 ngFor 循环的索引动态设置 class 或 id

Dynamically set class or id using index of ngFor loop

javascript

accordion

twitter-bootstrap

ngfor

angular