Question

我正在使用ngFor循环来使用ngb-accordion显示动态更新的数据。首次显示页面时，我将所有的手风琴面板激活;但是，当数据结构自动更新时，面板会崩溃。我希望他们保持打开并显示刷新的数据。 dashboardDataMulti是在组件中被更改的变量。我不确定导致面板崩溃的原因，但我可以肯定地说，当更新dashboardDataMulti变量时会发生这种情况。

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

HTML code：

    <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

正如你所看到的那样，所有手风琴都按照我的意愿展开了原始数据显示;但是，当原始数据阵列动态更新时，所有的手风琴都会崩溃。如何更新此数据结构并保持面板打开以供查看？

Answer 1

<ngb-panel>需要一个id标记。我使用以下代码更新了代码以获得所需的结果。

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

工作人员：http://plnkr.co/edit/rg1qPpe3YKeStBCaOVMb

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

1 个答案: