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

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 和 side bootstrap，这是折叠的例子

当您在注释中发布代码时，代码中存在一些拼写错误

这应该[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>

工作演示