1

ngb-accordion で動的に更新されたデータを表示するために ngFor ループを使用しています。ページが最初に表示されたときに、すべてのアコーディオン パネルがアクティブになっています。ただし、データ構造が自動的に更新されると、パネルが折りたたまれます。それらを開いたままにして、更新されたデータを表示したいと思います。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);

私が抱えている問題を模倣するためにプランカーを追加しました。

http://plnkr.co/edit/YJGXuoVGC9MeTJfpmPRb

ご覧のとおり、すべてのアコーディオンが必要に応じて展開された originalData が表示されます。ただし、originalData 配列が動的に更新されると、すべてのアコーディオンが崩壊します。このデータ構造を更新し、パネルを開いたままにして表示するにはどうすればよいですか?

4

1 に答える 1