ViewDestroyedError when switching between Storybook stories for component that uses ngx-datatable and not working knobs

Viewed 246

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.

0 Answers
Related