我尝试在 AngFor 中使用 Bootsrap 5 的手风琴，但遇到问题

Question

<div class="accordion w-50 mx-auto" id="accordionExample">
  <div *ngFor="let note of notes; index as i;">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne ">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="'#collapse + i'" aria-expanded="true" >
        {{note.subject}}

      </button>
    </h2>
    <div id="'collapse + i'" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        {{note.text}}
        <div class="mt-2">
        <button class="btn btn-sm btn-primary" type="button">Edit</button>
          <button class="btn btn-sm btn-danger ms-3" type="button">Delete</button>
        </div>
      </div>
    </div>
  </div>
  </div>

我想为每个元素打开一个手风琴，但所有元素都打开。我使用不同的 id 和索引，但它仍然不起作用。

Answer 1

如果我理解你的问题，你应该像这样更改你的代码：

<div class="accordion w-50 mx-auto" id="accordionExample">
  <div *ngFor="let note of notes; index as i;">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne ">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" [attr.data-bs-target]="'#collapse' + i" aria-expanded="true" >
        {{note.subject}}

      </button>
    </h2>
    <div [id]="'collapse' + i" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        {{note.text}}
        <div class="mt-2">
        <button class="btn btn-sm btn-primary" type="button">Edit</button>
          <button class="btn btn-sm btn-danger ms-3" type="button">Delete</button>
        </div>
      </div>
    </div>
  </div>
  </div>

使用 Angular 数据绑定属性，您可以正确设置 ids