如何在自动更新 ngFor 数据结构的同时扩展 ngb-accordion 中的面板答案

【问题标题】：How to expand panels in ngb-accordion while automatically updating ngFor data structure如何在自动更新 ngFor 数据结构的同时扩展 ngb-accordion 中的面板
【发布时间】：2018-11-23 09:46:51
【问题描述】：

我正在使用 ngFor 循环通过 ngb-accordion 显示动态更新的数据。首次显示页面时，我所有的手风琴面板都处于活动状态；但是，当数据结构自动更新时，面板会崩溃。我希望他们保持打开状态并显示刷新的数据。 dashboardDataMulti 是在组件中被更改的变量。我不确定是什么导致面板崩溃，但我可以肯定地说，它是在更新 dashboardDataMulti 变量时发生的。

更新：我能够在没有 ngx-charts 的情况下重现错误。这个问题似乎是由 ng-bootstrap 或 Angular 的问题引起的，其中动态数据在手风琴中重新填充（为简洁而编辑的代码）。

HTML 代码：

    <div *ngFor="let data of dashboardDataMulti; index as i">
            <ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-{{i}}" type="light">
                <ngb-panel  title="{{data.name}}">
                    <ng-template ngbPanelContent>
                    </ng-template>
                </ngb-panel>
            </ngb-accordion>
        </div>

组件定时器：

    setTimeout(() => {
      this.generateDashboardData();
      // change the data periodically
      this.dataInterval = setInterval(() => this.generateDashboardData(), 10 * 600);
}, 1000);

添加了 plunker 来模仿我遇到的问题。

http://plnkr.co/edit/YJGXuoVGC9MeTJfpmPRb

您可以看到 originalData 显示所有手风琴都按我的意愿展开；但是，当 originalData 数组动态更新时，所有的手风琴都崩溃了。如何更新此数据结构并保持面板打开以供查看？

【问题讨论】：

标签： angular ng-bootstrap ngx-charts

【解决方案1】：

<ngb-panel> 需要一个 id 标签。我用以下代码更新了代码以达到预期的效果。

    <ngb-panel  title="{{data.name}}" id="ngb-panel-{{i}}">

一个工作的笨蛋：http://plnkr.co/edit/rg1qPpe3YKeStBCaOVMb

【讨论】：