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

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

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。请参阅this Plunker了解演示

Answer 2

我以这种方式解决了它，我想这比实际更改数据本身要方便一些。

在组件的HTML部分中，获取ngFor循环的索引，并在事件绑定和ngbCollapse伪指令中使用此index-variable。为了使这项工作有效，您需要在component.ts文件中使用一个布尔值数组。

组件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[] = [];

}

Answer 3

对于那些在循环中使用 ngx-bootstrap 手风琴的人：

<div 
[attr.id]="setting.id" 
[class.collapse]="setting.isCollapsed" 
(collapsed)="collapsed($event)"
(expanded)="expanded($event)">
  <p>
     {{setting.isCollapsed}}
  </p> 
</div>

使用数据循环折叠区域

3 个答案: