Складная функция не работает в angular8

Question

Я пытаюсь реализовать коллапс в Angular8, но он не работает

<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
  <div id="demo" name="demo" class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>

мы можем сделать (click)="isCollapse=!isCollapse", но я хочу использовать коллапс в foreach l oop.

Answer 1

Вы должны использовать нг- bootstrap вдоль стороны bootstrap, и вот пример коллапс

Когда вы разместили свой код в комментарии в вашем коде есть некоторые опечатки

Это должно быть [attr.data-target]="'#' + data.id" -> [attr.data-target]="'#' + item.id", поскольку item является текущим / каждым элементом.

Итак полный пример с ng-bootstrap

Вы должны использовать уникальную переменную для каждого элемента

// .ts
data = [
    {
      isCollapsed: false
    },
    {
      isCollapsed: true
    },
    {
      isCollapsed: false
    },
    {
      isCollapsed: true
    },
    {
      isCollapsed: false
    },
  ];

//.html
<div *ngFor="let item of data">
    <p>
        <button type="button" class="btn btn-outline-primary" (click)="item.isCollapsed = !item.isCollapsed">Toggle</button>
    </p>
    <div class="card" [ngbCollapse]="item.isCollapsed">
        <div class="card-body">
            You can collapse this card by clicking Toggle
        </div>
    </div>
</div>

Рабочая демонстрация