У меня трудности с рассказами в сборнике рассказов. Появляется следующая ошибка:
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.