Angular js中的Bootstrap崩溃

Question

使用angularJs使用bootstrap collapse ui时遇到问题。当我点击箭头按钮时，它会折叠所有项目（div）而不是一个。任何身体可以帮助我，我如何定义要折叠的所选项目（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

您为每个项目使用相同的变量。

要解决您的问题，您可以：

• 将变量isCollapse存储在item变量中，但您必须更新模型以存储上下文变量
• 创建一个包含N个元素的array，然后处理此数组中的每个状态
• 使用指令/组件折叠处理是自己的状态

Answer 2

因为isCollapsed是你的可折叠的唯一基础。在你的isCollapsed中添加item作为属性。然后使用item.isCollapsed进行折叠切换。