Angular 使用数据循环折叠区域

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

细节
{{row.detail}}

---

我不能让它只展开单击列的细节

您有一个变量

isCollapsed

，它控制每个div的展开/折叠（因此要么全部展开，要么全部折叠）。您尚未发布Typescript，但我假设它看起来是这样的：

export class MyComponent {

  public isCollapsed: boolean = true;

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

您需要单个

iscollected

变量来跟踪单个div

如果您可以控制

行中的对象

，则可以将其添加到该行：

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>

细节
{{row.detail}}

---

这将允许您控制单个div的展开/折叠。请看演示

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

在组件的HTML部分，获取ngFor循环的索引，并在事件绑定和ngbCollapse指令中使用此索引变量。 为了实现这一点，您需要在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>

---

对于在循环中使用ngx引导手风琴的用户：

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

{{setting.isCollapsed}

您是否检查了ng引导程序是否正确安装？是的，该区域会扩展，但所有区域都会扩展，而不仅仅是单击的区域。如果您有多个具有相同id的行，那么它将无法工作，我猜。如果我删除或在id标记中添加该行的id，我相信div的id与此问题无关，同样的事情还在发生。