Angular Bootstrap 4 свернуть, открыв / закрыв все предметы - PullRequest
Новая
       8

Angular Bootstrap 4 свернуть, открыв / закрыв все предметы

0 голосов
/ 15 февраля 2019

Я пытаюсь иметь только 1 элемент в моем ng для расширения / закрытия, используя компонент свертывания boostrap 4.

Это мой код 

<div class="card-footer account clickthrough" *ngFor="let attachment of item.attachments; let j=index" (click)="isCollapsed = !isCollapsed" [attr.aria-expanded]="!isCollapsed"
        aria-controls="collapseExample">
        Attachment {{j+1}}
    <div id="collapseExample" [ngbCollapse]="isCollapsed">
      <div class="card">
        <div class="card-body">
          <p>Attachment ID: {{attachment.id}}</p>
          <p>Attachment Delivery Message: {{attachment.attachToDeliveryMessage}}</p>
        </div>
      </div>
    </div>
</div>

Это скриншот моего пользовательского интерфейсаenter image description here

Таким образом, в настоящее время, если я нажимаю на элемент вложения, все элементы вложения будут раскрываться / закрываться одновременно.Мне просто нужно нажать на вложенный элемент, чтобы развернуть / закрыть

1 Ответ

0 голосов
/ 15 февраля 2019

Причина в том, что вы полагаетесь на одну переменную и пытаетесь переключаться по всем щелчкам, поэтому для привязки вам нужны отдельные переменные.В любом случае создайте дополнительные переменные для каждого элемента, что не рекомендуется в таких случаях, поэтому вы можете попробовать это - 

<div *ngFor="let attachment of item.attachments; let j = index" (click)="attachment.isCollapsed = !attachment.isCollapsed" [attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample">
    Attachment {{j+1}}
    <div id="collapseExample" [ngbCollapse]="attachment.isCollapsed">
        <div class="card">
            <div class="card-body">
                <p>Attachment ID: {{attachment.id}}</p>
                <p>Attachment Delivery Message: {{attachment.attachToDeliveryMessage}}</p>
            </div>
        </div>
    </div>
</div>
...