ViewDestroyedError при переключении между историями Storybook для компонента, который использует ngx-datatable и не работающие ручки - PullRequest
0 голосов
/ 16 марта 2020

У меня трудности с рассказами в сборнике рассказов. Появляется следующая ошибка:

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.
  • при переключении с 'Multiselection enabled ver1' на 'Multiselection enabled ver2' все в порядке.
  • при переключении от 'Многопользовательский выбор ver1' или 'Многопользовательский выбор ver2' до 'Многопользовательский выбор отключен' (или наоборот) - выброшен ViewDestroyedError и страница должна быть перезагружена, чтобы начать работать
  • Я пробовал также использовать ручки, но это не так работа - изменение входных данных через них не вносит никаких изменений в представление

Кто-то имел подобную проблему и решил ее? При использовании компонента в приложении angular он работает нормально, ошибка отображается только в Storybook.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...