1

我正在使用 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 数组动态更新时，所有的手风琴都崩溃了。如何更新此数据结构并保持面板打开以供查看？

4

1 回答 1

2

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

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

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

于 2018-06-14T16:17:10.257 回答