javascript – 没有setTimeOut,MatSort和MatPaginator不起作用

我有一个来自端点的数据并将其放入MatTableDataSource.我能够让它适用于MatSort和MatPaginator,但需要使用setTimeOut,这似乎不是一个正确的方法来做到这一点.如果我删除它,它会抱怨’无法读取sort undefined属性’,我认为这是由于它尚未初始化.

我也尝试过：

>将其移动到afterviewinit,但数据在之后加载
afterviewinit被调用,所以它仍然无法正常工作
>在this.datasource =之后使用this.changeDetectorRef.detectChanges()
新……也行不通

这是我当前的代码(正在运行,但使用settimeout)

<div *ngIf="!isLoading">
    <div *ngFor="let record of renderedData | async" matSort>

    // ... some html to show the 'record'

    <mat-paginator #paginator
        [pageSizeOptions]="[5, 10, 20]">
    </mat-paginator>
</div>

组件

export class ResultsComponent implements OnInit, OnDestroy, AfterViewInit {
    dataSource: MatTableDataSource<any> = new MatTableDataSource();
    renderedData: Observable<any>;

    @ViewChild(MatPaginator) paginator: MatPaginator;
    @ViewChild(MatSort) sort: MatSort;

    constructor(some service) {}

    ngOnInit() {
        const accountId = someOtherService.getAccountId();
        this.someService.getData(accountId)
            .subscribe((myData) => {
                    this.dataSource = new MatTableDataSource(myData);

                    // it won't work properly if it is not wrapped in timeout
                    setTimeout(() => {
                        this.dataSource.paginator = this.paginator;
                        this.sort.sort(<MatSortable>({id: 'created_on', start: 'desc'}));
                        this.dataSource.sort = this.sort;
                    });

                    this.renderedData = this.dataSource.connect();
                }
            });
    }

    ngAfterViewInit() {
    }

    ngOnDestroy(): void {
        if (this.dataSource) { this.dataSource.disconnect(); }
    }
}

上面的代码对我有用,我只是在寻找正确的方法,如果可能的话不使用settimeout.

解决方法:

这里有几个生命周期计时问题,当你考虑它时,这是正确的.

MatSort是视图的一部分,因此在OnInit期间它没有“准备好” – 它是未定义的.因此,尝试使用它会引发错误.

MatSort在AfterViewInit中已经准备就绪,但是在执行排序之后需要将排序“应用”到数据源这一事实使事情变得更加复杂,并且这会通过“连接”到的renderData触发对视图的更改数据源.因此,您最终会遇到ExpressionChangedAfterItHasBeenCheckedError,因为视图初始化生命周期尚未完成,但您已尝试更改它.

因此,在视图准备就绪之前,您无法进行排序,并且当您收到视图已准备好的通知时,您无法应用排序.您唯一能做的就是等到组件初始化生命周期结束.你可以使用setTimeout()来做到这一点.

如果没有setTimeout(),我认为没有任何解决这两个问题的方法,所以在这种情况下,无论是从OnInit还是AfterViewInit调用它都无关紧要.

关于您的代码的其他一些观察：

您无需在订阅中创建MatTableDataSource的新实例.您可以将结果数据分配给已创建的数据源：

this.dataSource.data = myData;

这使您不必在以后将渲染数据连接到数据源,因此您可以在初始化数据源时执行此操作：

dataSource: MatTableDataSource<any> = new MatTableDataSource();
renderedData: Observable<any> = this.dataSource.connect();

标签：javascript,angular,sorting,pagination,angular-material
来源： https://codeday.me/bug/20191002/1843573.html