可折叠功能在 angular8 中不起作用答案

【问题标题】：Collapsible feature not working in angular8可折叠功能在 angular8 中不起作用
【发布时间】：2020-05-23 05:57:59
【问题描述】：

我试图在 Angular8 中实现折叠，但它不起作用

<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
  <div id="demo" name="demo" class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>

我们可以做(click)="isCollapse=!isCollapse"，但我想在foreach 中使用折叠循环。

【问题讨论】：

能否请您发布完整代码，ngFor 和 click
其实上面的代码也不能正常工作

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat。

标签： angular collapse

【解决方案1】：

您必须在引导程序旁边使用ng-bootstrap，这是collapse 的示例

当您在评论中发布代码时，您的代码中有一些拼写错误

这应该是[attr.data-target]="'#' + data.id" -> [attr.data-target]="'#' + item.id" 因为item 是当前/每个项目。

所以完整示例与ng-bootstrap

您必须为每个项目使用唯一变量

// .ts
data = [
    {
      isCollapsed: false
    },
    {
      isCollapsed: true
    },
    {
      isCollapsed: false
    },
    {
      isCollapsed: true
    },
    {
      isCollapsed: false
    },
  ];

//.html
<div *ngFor="let item of data">
    <p>
        <button type="button" class="btn btn-outline-primary" (click)="item.isCollapsed = !item.isCollapsed">Toggle</button>
    </p>
    <div class="card" [ngbCollapse]="item.isCollapsed">
        <div class="card-body">
            You can collapse this card by clicking Toggle
        </div>
    </div>
</div>

Working Demo

【讨论】：