I'm having some difficulties with stories in Storybook. The following error shows up:
core.js:19641 Uncaught Error: ViewDestroyedError: Attempt to use a destroyed view: detectChanges
at viewDestroyedError (core.js:19641)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:30040)
at checkAndUpdateView (core.js:29439)
at callWithDebugContext (core.js:30309)
at Object.debugCheckAndUpdateView [as checkAndUpdateView] (core.js:30011)
at ViewRef_.push../node_modules/@angular/core/fesm5/core.js.ViewRef_.detectChanges (core.js:20686)
at DataTableHeaderComponent.push../node_modules/@swimlane/ngx-datatable/fesm5/swimlane-ngx-datatable.js.DataTableHeaderComponent.setStylesByGroup (swimlane-ngx-datatable.js:4362)
at swimlane-ngx-datatable.js:4086
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
Here's the simple component and stories files connected with that issue:
@Component({
selector: 'data-table',
template: `
<ngx-datatable
class="material expandable"
rowHeight="auto"
headerHeight="auto"
footerHeight="40"
columnMode="force"
[rows]="rows">
<ngx-datatable-column
*ngIf = "multiSelection"
[headerCheckboxable]="true"
[checkboxable]="true">
</ngx-datatable-column>
<ngx-datatable-column
*ngFor="let column of columns"
[prop]="column"
[name]="column">
</ngx-datatable-column>
</ngx-datatable>
`,
})
export class TableComponent {
@Input() multiSelection: boolean;
@Input() rows = [];
columns = ['firstName', 'lastName'];
}
const firstRowsVariant = [
{firstName: 'John', lastName: 'Smith'},
{firstName: 'Donald', lastName: 'Trump'},
{firstName: 'Barack', lastName: 'Obama'},
];
const secondRowsVariant = [
{firstName: 'Donald', lastName: 'Trump'},
{firstName: 'Barack', lastName: 'Obama'},
];
storiesOf('Components|Test', module).addDecorator(
moduleMetadata({
imports: [GidcTableModule]
})
).add(
'Multiselection enabled',
() => ({
component: TableComponent,
props: {
multiSelection: true,
rows: firstRowsVariant
}
}),
{
notes: ''
}
).add(
'Multiselection enabled ver2',
() => ({
component: TableComponent,
props: {
multiSelection: true,
rows: secondRowsVariant
}
}),
{
notes: ''
}
).add(
'Multiselection disabled',
() => ({
component: TableComponent,
props: {
multiSelection: false,
rows: firstRowsVariant
}
}),
{
notes: ''
}
);
It happens only in particular situations:
- when switching stories in Storybook that use only ngx-datatable component.
- when switching from 'Multiselection enabled ver1' to 'Multiselection enabled ver2' everything is fine.
- when switching from 'Multiselection enabled ver1' or 'Multiselection enabled ver2' to 'Multiselection disabled' (or conversely) - ViewDestroyedError thrown and page has to be reloaded to start working
- I have tried also using knobs but it doesn't work - changing inputs through them doesn't make any change in the view
Has someone similar issue and has resolved it? When using the component in angular app it works fine, the error shows up only in Storybook.