Question

我试图在页面上获得多于1个折叠组件，但是当您切换其中一个时，所有折叠组件都会被切换。有没有办法让我有多个折叠组件在1页上工作，我可以在哪里单独切换它们？

示例：从https://ng-bootstrap.github.io/#/components/collapse/examples

获得

    <div class="row">
    <div class="col-6">
        <button type="button" class="btn btn-outline-primary" (click)="isCollapsed = !isCollapsed" [attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample">
    Toggle
  </button>

        <div id="collapseExample" [ngbCollapse]="isCollapsed">
            <div class="card">
                <div class="card-body">
                    You can collapse this card by clicking Toggle
                </div>
            </div>
        </div>
    </div>

    <div class="col-6">
        <button type="button" class="btn btn-outline-primary" (click)="isCollapsed = !isCollapsed" [attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample2">
    Toggle
  </button>

        <div id="collapseExample2" [ngbCollapse]="isCollapsed">
            <div class="card">
                <div class="card-body">
                    You can collapse this card by clicking Toggle
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

由于OP代码看起来符合在循环内生成的条件，因此我想为动态生成的内容提供更强大的解决方案。

该文档仅演示了与模型(isCollapsed) 1：1关系的简单情况。如果要管理数百个可折叠的设备，这将很糟糕。相反，当您遍历对象时生成内容时，请将折叠状态附加到对象：

myObjList = [{propKey: propVal, isCollapsed: true}]

这样，当对象与以下对象交互时，您可以按对象引用状态：

<... *ngFor='let row of myObjList' ...> <button class="btn btn-link" (click)="row.isCollapsed = !row.isCollapsed"

Answer 2

试试这个：

      ` <div class="row">
        <div class="col-6">
              <button type="button" class="btn btn-outline-primary" (click)="isCollapsed = !isCollapsed" [attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample">
              Toggle
           </button>

       <div id="collapseExample" [ngbCollapse]="isCollapsed">
        <div class="card">
            <div class="card-body">
                You can collapse this card by clicking Toggle
            </div>
        </div>
    </div>
</div>

<div class="col-6">
    <button type="button" class="btn btn-outline-primary" (click)="isCollapsedone = !isCollapsedone" [attr.aria-     expanded]="!isCollapsedone" aria-controls="collapseExample2">
        Toggle
         </button>

      <div id="collapseExample2" [ngbCollapse]="isCollapsedone">
        <div class="card">
            <div class="card-body">
                You can collapse this card by clicking Toggle
            </div>
        </div>
    </div>
</div>

`

在你的打字稿中： public isCollapsedone = false:

Answer 3

使用属性ngbCollapse有其局限性。 Bootstrap适应了一种更简单的解决方案，该解决方案可以在任何情况下（例如您的情况）使用行循环，而这种情况在行上没有循环或其他情况下都适用：

使用您的代码：

模板（html）：

<div class="col-6">
    <button type="button" class="btn btn-outline-primary" 
           (click)="toggle(collapseExample)"> Toggle
    </button>

    <div #collapseExample >
        <div class="card">
            <div class="card-body">
                You can collapse this card by clicking Toggle
            </div>
        </div>
    </div>
</div>
...

控制器（ts）：

...
public toggle( element: HTMLElement) {
  element.classList.toggle('d-none');
}

实用程序：

...
<tbody *ngFor="let item of items">
  <tr>
   <td class="text-center" (click)="toggle(rowItem)" ></td>
  </tr>
  <tr #rowItem>
    Value
  </tr>
</tbody>

ng-bootstrap折叠组件在切换时折叠所有组件 - 角度6

3 个答案: