Angular JS中的Bootstrap崩潰

Question

我在使用angularJs引導折疊ui時遇到問題。 當我單擊箭頭按鈕時，它折疊了所有項目（格）而不是一個。 任何機構都可以幫助我，如何定義要折疊而不是全部折疊的選定項目（div）？ 這是我的代碼。謝謝。

  <div class="panel">
      <div class="panel-header">
        <div class="panel-header-info">
          <div class="items_list" *ngFor="let item of items">
            <div class="items_arrow_button" (click)="isCollapsed = !isCollapsed">
              <div class="img">
                <img src="./assets/images/img.png" class="img-responsive">
              </div>
              <span> Test data {{data.data}}</span>
              <i class="fa" [ngClass]="{'fa-angle-down': isCollapsed, 'fa-angle-up': !isCollapsed}"></i>
            </div>
            <div class="items_list" [collapse]="isCollapsed">
              <ul>
                <li>
                  <h2>First item</h2>
                  <span>{{data.item}}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

Answer 1

這是因為isCollapsed是可折疊的唯一基礎。 將isCollapsed添加為item的屬性。 然后使用item.isCollapsed進行合攏切換。

Answer 2

您為每個項目使用相同的變量。

要解決您的問題，您可以：

• 將變量isCollapse存儲在item變量中，但是您必須更新模型以存儲上下文變量
• 創建一個由N個元素組成的array ，然后處理該數組中的每個狀態
• 使用指令/組件Collapse來處理自己的狀態