typescript 使用引导折叠的用于Angular 列表的动态折叠

6rqinv9w 于 2023-01-06 发布在 TypeScript

关注(0)|答案(2)|浏览(154)

我已经写了动态 accordion 的代码，它显示的设计正确，但功能（隐藏/显示）不工作。下面我分享的代码，请帮助我在这个问题。

- 超文本标记语言**

<div class="form-group">
<div class="accordion ms-auto col-sm-10" id="accordionExample" *ngFor="let category of categories;let i = index">
  <div class="accordion-item">
    <h2 class="accordion-header" id="'heading'+i">
      <button class="accordion-button" [ngClass]="{ 'collapsed': i != 0 }" type="button" data-bs-toggle="collapse"
       attr.data-target="'#collapse'+i" [attr.aria-controls]="'collapse'+i" aria-expanded="true" aria-controls="collapseOne">
        {{category.title}}
      </button>
    </h2>
    <div id="'collapse'+i" class="accordion-collapse collapse show" *ngFor="let item of category.symptoms"
     data-bs-parent="#accordionExample" [ngClass]="{ 'show': i == 0 }" [attr.aria-labelledby]="'heading'+i">
      <div class="accordion-body">
         <div class="boxes" style="width:180px;height: 100px;background-color: rgb(236, 243, 253);border-radius: 10px;">
         <input type="checkbox" style="margin-left: 10px;margin-top: 10px;"> {{item.title}}
         </div>
      </div>
    </div>
  </div>
  </div>
  </div>

typescript

来源：https://stackoverflow.com/questions/71967870/dynamic-accordion-for-lists-in-angular-using-bootstrap-accordion

2条答案

按热度按时间

gg0vcinb1#

每当你想把动态值绑定到任何HTML属性上时，你需要使用属性绑定。这意味着你需要使用方括号。例如，

<div [id]="'collapse' + i">

其中i是在*ngFor循环中定义的变量。
你的情况是这样的。

<div class="form-group">
<div class="accordion ms-auto col-sm-10" id="accordionExample" *ngFor="let category of categories;let i = index">
  <div class="accordion-item">
    <h2 class="accordion-header" [id]="'heading'+i">
      <button class="accordion-button" [ngClass]="{ 'collapsed': i != 0 }" type="button" data-bs-toggle="collapse"
       [attr.data-target]="'#collapse'+i" [attr.aria-controls]="'collapse'+i" aria-expanded="true" aria-controls="collapseOne">
        {{category.title}}
      </button>
    </h2>
    <div [id]="'collapse'+i" class="accordion-collapse collapse show" *ngFor="let item of category.symptoms"
     data-bs-parent="#accordionExample" [ngClass]="{ 'show': i == 0 }" [attr.aria-labelledby]="'heading'+i">
      <div class="accordion-body">
         <div class="boxes" style="width:180px;height: 100px;background-color: rgb(236, 243, 253);border-radius: 10px;">
         <input type="checkbox" style="margin-left: 10px;margin-top: 10px;"> {{item.title}}
         </div>
      </div>
    </div>
  </div>
  </div>
  </div>

赞(0）回复(0）举报 2023-01-06

s71maibg2#

[属性数据目标]不正确，应为[属性数据BS目标]

赞(0）回复(0）举报 2023-01-06