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>

我想要做的是使用＆＃34;让我=索引＆＃34;设置所需的id和类名，使手风琴在单击某些链接时知道该怎么做。所以理想情况下，第一个手风琴部分的class和id为collapse0 / heading0，而下一个会有id和class of collapse1 / heading1等。

但是，之前的代码必须无法正常工作，因为所有的手风琴及其标题都会显示出来，并且在点击时不会执行任何操作。它会生成正确的数字，显示所有正确的标题以及与之关联的实体。

有任何帮助吗？谢谢！

Answer 1

你也可以这样做

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

以及aria-属性以角度处理的另一种方式，你需要用attr.作为前缀。在您的示例中应该是attr.aria-controls="heading{{i}}"。

Answer 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访问您的索引。

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

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

3 个答案: