使用数据循环折叠区域

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 循环的索引并在事件绑定和 ngbCollapse 指令中使用此索引变量。要完成这项工作，您需要在 component.ts 文件中包含一个 booleans 属性数组。

组件 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>

组件打字稿

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

Answer 2

您有一个变量isCollapsed来控制每个 div 的展开/折叠（因此要么全部展开，要么全部折叠）。你还没有发布打字稿，但我假设它看起来像这样：

export class MyComponent {

  public isCollapsed: boolean = true;

  public rows: object[] = [
    { detail: 'x' },
    { detail: 'y' }
  ]; 
}

您需要单独的isCollapsed变量来跟踪各个 div。

如果您可以控制其中的对象，则rows可以将其添加到那里：

public rows: object[] = [
  {
    detail: 'x',
    isCollapsed: true
  },
  {
    detail: 'y',
    isCollapsed: true
  }
];

然后按如下方式更改 HTML：

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

这将允许您控制展开/折叠单个 div。请参阅此 Plunker以获取演示