angular - 带数据循环的折叠区域

Question

我有一个 SPA(单页应用程序)，其中有一个表格可以扩展详细信息。

这是代码:

<div class="row mt-4" *ngFor="let row of rows">
    <div class="col-12">
        <button class="btn btn-link" (click)="isCollapsed = !isCollapsed"
          [attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample">
            <i class="fa" aria-hidden="true"></i>
            Details
        </button>
        <div [ngbCollapse]="isCollapsed">
            {{ row.detail}}
        </div>
    </div>
</div>

我无法让它仅展开单击列的详细信息

Answer 1

我是这样解决的，我想这比实际更改数据本身更方便。

在组件的 HTML 部分中，获取 ngFor 循环的索引，并在事件绑定(bind)和 ngbCollapse 指令中使用此索引变量。要实现此功能，您的 component.ts 文件中需要一个 bool 属性数组。

组件 HTML

<div *ngFor="let row of rows; let i = index">
    <button type="button" (click)="isCollapsed[i] = !isCollapsed[i]">
        Button Text
    </button>
    <div [ngbCollapse]="isCollapsed[i]">
        .. some content ..
    </div>
</div>

组件 TypeScript

@Component({
  selector: 'xxx',
  templateUrl: './xxx.component.html',
  styleUrls: [ './xxx.component.css']
})
export class xxx{

  public isCollapsed: boolean[] = [];

}