Angular Bootstrap 4 折叠 opening/closing 所有项目

Question

我正在尝试使用 boostrap 4 折叠组件在我的 ngFor expand/close 中只包含 1 个项目。

这是我的代码

<div class="card-footer account clickthrough" *ngFor="let attachment of item.attachments; let j=index" (click)="isCollapsed = !isCollapsed" [attr.aria-expanded]="!isCollapsed"
        aria-controls="collapseExample">
        Attachment {{j+1}}
    <div id="collapseExample" [ngbCollapse]="isCollapsed">
      <div class="card">
        <div class="card-body">
          <p>Attachment ID: {{attachment.id}}</p>
          <p>Attachment Delivery Message: {{attachment.attachToDeliveryMessage}}</p>
        </div>
      </div>
    </div>
</div>

这是我的截图 UI

所以目前如果我点击一个附件项，所有附件项都会同时 expand/close。我只需要点击附件项到 expand/close

Answer 1

原因是您依赖于单个变量并试图在所有点击时切换，因此您必须需要单独的变量来绑定。任何一种方法都是为每个项目创建单独的变量，在这种情况下不推荐这样你可以试试这个 -

<div *ngFor="let attachment of item.attachments; let j = index" (click)="attachment.isCollapsed = !attachment.isCollapsed" [attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample">
    Attachment {{j+1}}
    <div id="collapseExample" [ngbCollapse]="attachment.isCollapsed">
        <div class="card">
            <div class="card-body">
                <p>Attachment ID: {{attachment.id}}</p>
                <p>Attachment Delivery Message: {{attachment.attachToDeliveryMessage}}</p>
            </div>
        </div>
    </div>
</div>

Angular Bootstrap 4 折叠 opening/closing 所有项目

Angular Bootstrap 4 collapse opening/closing all items

bootstrap-4

ng-bootstrap

angular