Компонент сжатия ng-bootstrap сворачивает все компоненты при переключении одного - угловой 6 - PullRequest
Новая
       8

Компонент сжатия ng-bootstrap сворачивает все компоненты при переключении одного - угловой 6

0 голосов
/ 15 мая 2018

Я пытаюсь получить более 1 компонента свертывания на странице, но при переключении одного из них все компоненты свертывания переключаются.Есть ли способ для меня иметь несколько компонентов свертывания для работы на 1 странице, где я могу переключать их по отдельности?

Пример: получено из: https://ng -bootstrap.github.io / # /компоненты / свернуть / примеры 

    <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 голосов
/ 25 января 2019

Поскольку код OP выглядит так, как будто он может быть сгенерирован в цикле, я хотел предоставить более надежное решение для динамически генерируемого содержимого.

Документация демонстрирует только простой случай отношения 1: 1 с моделью (isCollapsed). Если вы хотите управлять сотнями сборно-разборных, это плохо. Вместо этого, когда вы генерируете контент при переборе объекта, добавьте к нему состояние свертки:

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

Таким образом, вы можете ссылаться на состояние объекта, когда объект взаимодействует с:

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

0 голосов
/ 04 июня 2019

Использование свойства 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');
}

Использование ngFor: 

...
<tbody *ngFor="let item of items">
  <tr>
   <td class="text-center" (click)="toggle(rowItem)" ></td>
  </tr>
  <tr #rowItem>
    Value
  </tr>
</tbody>
0 голосов
/ 15 мая 2018

Попробуйте: 

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

...