Question

我正在尝试在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 循环中使用折叠。

Answer 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

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

1 个答案: