Как collapse раскрывать каждый свой?

Question

[part_os]

Есть множество элементов:

<button type="button" class="btn btn-primary" (click)="isCollapsed = !isCollapsed"
        [attr.aria-expanded]="!isCollapsed" aria-controls="collapseBasic1">Toggle collapse
</button>
<hr>
<div id="collapseBasic1" [collapse]="isCollapsed">
  <div class="well well-lg card card-block card-header">Some content</div>
</div>

<button type="button" class="btn btn-primary" (click)="isCollapsed = !isCollapsed"
        [attr.aria-expanded]="!isCollapsed" aria-controls="collapseBasic1">Toggle collapse
</button>
<hr>
<div id="collapseBasic1" [collapse]="isCollapsed">
  <div class="well well-lg card card-block card-header">Some content</div>
</div>

в компоненте прописан:
isCollapsed = false;

сейчас они раскрываются все по нажатию, как заставить их открываться каждый по своей кнопке?

Answer 1

[Антон Швец]

нашел похоже ваш пример и чуть доработал.
Не нужно плодить лишние переменные.

https://stackblitz.com/edit/ngx-bootstrap-collapse...

Answer 2

[Ivan Brezhnev]

Как-то примерно так

<button
  type="button"
  class="btn btn-primary"
  (click)="panels.panel1 = !panels.panel1"
  [attr.aria-expanded]="!panels.panel1"
  aria-controls="collapseBasic1"
>
  Toggle collapse
</button>

<hr />

<div id="collapseBasic1" [collapse]="panels.panel1">
  <div class="well well-lg card card-block card-header">Some content</div>
</div>

<button
  type="button"
  class="btn btn-primary"
  (click)="panels.panel2 = !panels.panel2"
  [attr.aria-expanded]="!panels.panel2"
  aria-controls="collapseBasic1"
>
  Toggle collapse
</button>

<hr />

<div id="collapseBasic1" [collapse]="panels.panel2">
  <div class="well well-lg card card-block card-header">Some content</div>
</div>

// panels.component.ts
export class PanelsComponent {
  public panels: { [panelName: string]: boolean } = {
    panel1: false,
    panel2: false
  }
}

Comments

[part_os]

а если их 10 будет, и динамически будут добавляться ? не писать же каждый. panel1: false,
panel2: false ... panel-N ?

[Ivan Brezhnev]

Конечно нет) Задача решена так как вы её поставили.

Создайте массив панелей вместо объекта

public panels: Array<{ content: string; collapsed: boolean }> = [
  {
    content: '',
    collapsed: false
  }
]

<div *ngFor="let panel of panels; index as i">
    <button
      type="button"
      class="btn btn-primary"
      (click)="panel.collapsed = !panel.collapsed"
      [attr.aria-expanded]="!panel.collapsed"
      [attr.aria-controls]="'collapseBasic' + i"
    >
      Toggle collapse
    </button>

    <hr />

    <div [id]="'collapseBasic' + i" [collapse]="panel.collapsed">
      <div class="well well-lg card card-block card-header">{{ panel.content }}</div>
    </div>
  </div>

[Ivan Brezhnev]

Можно и таким образом решить.
Свойства обзовите по вкусу.

public items: string[] = [
  'Some content',
  'Some content'
]
public panels: { [index: number]: boolean } = {};

<div class="panel" *ngFor="let content of items; index as i">
    <button
      type="button"
      class="btn btn-primary"
      (click)="panels[i] = !panels[i]"
      [attr.aria-expanded]="!panels[i]"
      [attr.aria-controls]="'collapseBasic' + i"
    >
      Toggle collapse
    </button>

    <hr />

    <div [id]="'collapseBasic' + i" [collapse]="panels[i]">
      <div class="well well-lg card card-block card-header">{{ content }}</div>
    </div>
  </div>

[part_os]

спасибо, то что нужно.

[Ivan Brezhnev]

Пожалуйста)