我希望在窗口宽度改变时动态调整agGrid的大小,并在用户离开时销毁FromEvent.
import { Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { AgGridAngular } from 'ag-grid-angular';
import {
ColDef,
ColumnApi,
GridApi,
GridOptions,
GridReadyEvent,
IDatasource,
IGetRowsParams,
RowClickedEvent,
} from 'ag-grid-community';
import { debounceTime, fromEvent, ReplaySubject, Subject, takeUntil } from 'rxjs';
export class Component implements OnInit, OnDestroy {
private destroyed$: ReplaySubject<boolean> = new ReplaySubject(1);
@ViewChild(AgGridAngular)
agGrid: AgGridAngular;
public gridOptions: GridOptions = {
...,
onGridReady: this.onGridReady,
};
private gridApi: GridApi;
private columnApi: ColumnApi;
constructor() {
console.log('Construct');
}
ngOnDestroy(): void {
this.destroyed$.next(true);
this.destroyed$.complete();
}
onGridReady(params: GridReadyEvent) {
console.log('gridReady', this.destroyed$);
this.gridApi = params.api;
this.columnApi = params.columnApi;
fromEvent(window, 'resize')
.pipe(debounceTime(200), takeUntil(this.destroyed$))
.subscribe(() => {
console.log('Window resizing');
this.gridApi?.sizeColumnsToFit();
});
params.api.setDatasource(this.dataSource);
params.api.sizeColumnsToFit();
}
}
私家销毁的变量打印为:
{
"closed": false,
"currentObservers": null,
"observers": [],
"isStopped": false,
"hasError": false,
"thrownError": null,
"_bufferSize": 1,
"_windowTime": null,
"_timestampProvider": {},
"_buffer": [],
"_infiniteTimeWindow": true
}
在onInit内部,但在导致浏览器错误的onGridReady事件内部打印为undefined
:
ERROR TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, ReadableStream, Array, AsyncIterable, or Iterable