角度2动态添加的面板不折叠/扩展

Question

我有一个HTML片段，代表一个可折叠的面板，可以按预期展开/折叠，但是当我在Angular 2 Observable * ngFor中使用同一个标记时，展开/折叠行为就会丢失。我可以在源代码中看到面板的“内容”，但面板会启动并保持折叠状态。

<app-tab>    
  <app-tab-item *ngFor="let query of queries$ | async" [title]="query.name">
    <div>
      <div class="ibox collapsed">
        <div class="ibox-title">
          <h5>Collapsed Panel within Observable</h5>
          <div class="ibox-tools">
            <a class="collapse-link">
              <i class="fa fa-chevron-up"></i>
            </a>
          </div>
        </div>
        <div class="ibox-content" style="display: none;">
          <p>Collapsed panel within observable</p>
        </div>
      </div>
    </div>    
  </app-tab-item>

  <app-tab-item title="This Works!">
    <div>
      <div class="ibox collapsed">
        <div class="ibox-title">
          <h5>Collapsed Panel</h5>
          <div class="ibox-tools">
            <a class="collapse-link">
              <i class="fa fa-chevron-up"></i>
            </a>
          </div>
        </div>
        <div class="ibox-content" style="display: none;">
          <p>Collapsed panel</p>
        </div>
      </div>
    </div>
  </app-tab-item>

</app-tab>