在使用ngx-datatable而不工作旋钮的组件的Storybook故事之间切换时发生ViewDestroyedError

Question

我在故事书中遇到了一些困难。出现以下错误：

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)

以下是与此问题相关的简单组件和故事文件：

@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: ''
  }
);

仅在特定情况下会发生：

• 当在Storybook中切换仅使用ngx-datatable组件的故事时。
• 当从“启用多选的ver1”切换到“启用多选的ver2”时，一切都很好。
• [从“启用Multiselection ver1”或“启用Multiselection ver2”切换到“禁用Multiselection”时（或相反）-引发ViewDestroyedError并且必须重新加载页面才能开始工作
• 我也尝试过使用旋钮，但是它不起作用-通过它们更改输入不会在视图中进行任何更改

有人遇到类似问题并解决了吗？在angular应用中使用组件时，它可以正常工作，该错误仅在Storybook中显示。

Answer 1

我有相同的问题，我认为它与zone.js本身有关，例如保留对先前实例的引用。