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

所以我尝试在引导4中使用Angular创建一个折叠（手风琴）。我希望能够使用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>

这是手风琴{{i}，小节：{{j}

我试图做的是使用“let I=index”设置所需的id和类名，以使手风琴知道在单击某些链接时要做什么。因此，理想情况下，第一个手风琴部分的级别和id为折叠0/heading0，下一个部分的id和id为折叠1/heading1等

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

---

有什么帮助吗？谢谢

您只需数据绑定

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

访问你的索引。你也可以这样做

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

---

事实上，

aria-

属性正在以另一种方式处理，您必须在它们前面加上

attr.

。在您的示例中，应该是

attr.aria controls=“heading{{i}”

*以下是引导程序5的工作代码，符合NG12（动态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>

已安装的报价版本详细信息
{{lineItem.productType}:{{lineItem？.productOffering？.name}
你的正文

---

甚至你也可以创建ngFor中的子组件，就像我注释了

标记一样。

当我尝试这种方法时，我得到“无法绑定到'aria controls'，因为它不是'a'的已知属性”。在控制台中，像aria controls这样的属性是用前缀

attr来定义的。

。在您的例子中，您可以使用

attr.aria controls=“heading{{{i}}”

就像在那篇文章中提到的那样！非常感谢！这个问题难解的时间比我愿意承认的要长，谢谢！您是一个救生员。尝试这样做时，它说：无法绑定到“aria控件”，因为它不是“a”的已知属性