我希望在窗口宽度改变时动态调整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

推荐答案

在您的GridOptions中,您需要将this绑定到函数,如下所示:

public gridOptions: GridOptions = {
    onGridReady: this.onGridReady.bind(this),
};

不过,如果你愿意的话,这也可能行得通:

public gridOptions: GridOptions = {
    onGridReady: (event) => { this.onGridReady(event); },
};

Angular相关问答推荐

为什么当没有可观察对象发出值时,我的RxJS合并订阅会触发?

如何使ngx-editor的工具栏选项以Angular中的变量或常数形式动态格式化?

如何将CDkDropList与Angular FormArray和FormGroup一起使用?

如何动态呈现组件并以Angular 访问它们的方法?

Angular 15:将数据从主零部件传递到辅零部件

在Cypress中,对xlsx文件的读取并不总是正确的

如果我只在组件中使用某个主题,是否需要取消订阅该主题?

SignalR:协商有效,但消息未发送(.NET/Angular)

带有Angular 中断的进度条

无法将项目从 Angular 13 更新到 14

如何以编程方式关闭 ng-bootstrap 模式?

如何使用ngrx和effects 订阅成功回调

Angular2 测试 - 按 ID 获取元素

Angular2 Pipes:输出原始 HTML

如何在Angular 4中为数字管道指定语言环境千位分隔符

Angular 5 手动导入语言环境

使用 formControlName 和 ngModel 的Angular 6 警告

Angular 2 中的 $implicit 是什么?

Angular 2 可用的 yeoman 生成器

为什么 Angular 项目中没有 Angular-CLI 为 model生成命令?