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 配列が動的に更新されると、すべてのアコーディオンが崩壊します。このデータ構造を更新し、パネルを開いたままにして表示するにはどうすればよいですか?