使用数据循环折叠区域

时间:2018-06-05 15:33:54

标签: angular ng-bootstrap

我有一个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>

我无法扩展所点击列的详细信息

3 个答案:

答案 0 :(得分:4)

您有一个变量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了解演示

答案 1 :(得分:1)

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

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

}

答案 2 :(得分:0)

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

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