When the data source is dynamically switched, the interface displays an error
Hi，
When the data source is dynamically switched, the interface displays an error!
https://stackblitz.com/edit/angular-rcttcy?file=app.component.ts
HTML:
<ejs-dashboardlayout id="default_dashboard" columns="2" #default_dashboard [cellSpacing]="cellSpacing"
[cellAspectRatio]="5" [allowResizing]="true" [allowDragging]="true" [allowFloating]="true" >
<e-panels>
<e-panel *ngFor="let item of layout" [id]="item.id" [row]="item.row" [col]="item.col" [sizeX]="item.x" [sizeY]="item.y" >
<ng-template #header>
<div>
{{ item.id }}
</div>
</ng-template>
<ng-template #content>
<div>
{{ item.id }}
</div>
</ng-template>
</e-panel>
</e-panels>
</ejs-dashboardlayout>
The Data 'layout' is dynamically.
Step1: Click Load one
this.layout.push({ id: 'a1', row: 0, col: 0, x: 1, y: 1 });
this.layout.push({ id: 'a2', row: 0, col: 1, x: 1, y: 1 });
Step2: Click Load two
this.layout .push({ id: 'b1', row: 0, col: 0, x: 2, y: 1 });
this.layout .push({ id: 'b2', row: 1, col: 0, x: 1, y: 1 });
this.layout .push({ id: 'b3', row: 1, col: 0, x: 1, y: 1 });
Step3: Click Load three
this.layout .push({ id: 'c1', row: 0, col: 0, x: 2, y: 1 });
this.layout .push({ id: 'c2', row: 1, col: 0, x: 1, y: 1 });
Step4:
Click Load One:
the layout is wrong and can't display the id
