Angular Bootstrap 4折叠打开/关闭所有物品

Question

我试图使用boostrap 4折叠组件在ngFor扩展/关闭窗口中只有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>

这是我的用户界面的屏幕截图

因此，当前，如果我单击一个附件项目，则所有附件项目将同时展开/关闭。我只需要点击附件项即可展开/关闭

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>