使用 ngFor 循环的索引动态设置类或 id答案

【问题标题】：Dynamically set class or id using index of ngFor loop使用 ngFor 循环的索引动态设置类或 id
【发布时间】：2018-06-26 20:53:27
【问题描述】：

所以我正在尝试使用 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 和 id 为 collapse0/heading0，下一个部分的 id 和 class 为 collapse1/heading1 等。

但是，前面的代码一定不能工作，因为所有的手风琴和它们的标题都会显示出来，并且在单击时什么也不做。它确实会生成正确的数字，显示所有正确的标题，以及与之关联的正文。

有什么帮助吗？谢谢！

【问题讨论】：

标签： javascript angular twitter-bootstrap accordion ngfor

【解决方案1】：

你也可以这样做

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

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

【讨论】：

当我尝试这种方式时，我在控制台中得到“无法绑定到 'aria-controls'，因为它不是 'a' 的已知属性”
类似 aria-controls 的属性定义为在其前面加上 attr.。在您的情况下，您可以使用attr.aria-controls="heading{{i}}"this answer on stackoverflow中提到的@
做到了！非常感谢！
这个问题困扰的时间比我愿意承认的要长，谢谢！你是救生员。

【解决方案2】：

你只需要数据绑定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 访问您的索引。

【讨论】：

试图这样做，它说：不能绑定到“aria-controls”，因为它不是“a”的已知属性

【解决方案3】：

*下面是带有 ngFor Angular 12（动态 id）的 bootstrap 5 手风琴的工作代码：

<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> 标签一样。

【讨论】：