可折叠功能在角度 8 中不起作用

Question

我正在尝试在 Angular 8 中实现折叠，但它不起作用

<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 loop.

中使用折叠

Answer 1

你必须使用ng-bootstrap along side bootstrap and here is the example of collapse

As you posted your code in comment, there are some typos in your code

This should be [attr.data-target]="'#' + data.id" -> [attr.data-target]="'#' + item.id" as item is a current/each 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

可折叠功能在角度 8 中不起作用

Collapsible feature not working in angular8

angular

collapse