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

时间:2018-05-15 01:59:24

标签: angular ng-bootstrap

我试图在页面上获得多于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>

3 个答案:

答案 0 :(得分: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"

答案 1 :(得分:0)

试试这个:

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

答案 2 :(得分:0)

使用属性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>