Angular 2中Angular Material表格Paginator配置报错求助

我来帮你解决这个问题～你遇到的报错是因为自定义的eDataSource类并没有实现Angular Material表格分页所需的逻辑，它缺少了与分页器交互的属性和数据处理方法。下面是具体的修复步骤：

问题原因 #

你当前的eDataSource只是简单返回全部数据，没有能力根据分页器的pageIndex和pageSize参数来返回对应页的数据，也没有定义paginator属性，所以TypeScript会抛出属性不存在的错误。

修复步骤 #

1. 更新eDataSource类，添加分页逻辑 #

修改你的数据源类，让它能够监听分页器的变化并返回对应页的数据：

import { MatPaginator } from '@angular/material';
import { Observable } from 'rxjs/Observable';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { map } from 'rxjs/operators';

export class eDataSource extends DataSource<Element> {
  // 用BehaviorSubject保存原始数据，方便后续更新
  private dataSubject = new BehaviorSubject<Element[]>(this.element);
  public data$ = this.dataSubject.asObservable();

  // 定义paginator属性，使用getter和setter来处理变化
  private _paginator: MatPaginator | undefined;

  set paginator(paginator: MatPaginator | undefined) {
    this._paginator = paginator;
    // 分页器设置完成后，立即更新数据
    if (this._paginator) {
      this.updatePagination();
    }
  }

  get paginator(): MatPaginator | undefined {
    return this._paginator;
  }

  constructor(private element: Element[]) {
    super();
    this.dataSubject.next(element);
  }

  connect(): Observable<Element[]> {
    // 如果分页器存在，监听分页变化事件，返回对应页的数据
    if (this.paginator) {
      return this.paginator.page.pipe(
        map(() => this.updatePagination())
      );
    }
    // 没有分页器时返回全部数据
    return this.data$;
  }

  disconnect() {
    this.dataSubject.complete();
  }

  // 根据分页参数计算并返回当前页的数据
  private updatePagination(): Element[] {
    if (!this.paginator || !this.dataSubject.value) {
      return [];
    }

    const data = this.dataSubject.value;
    const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
    // 截取当前页的数据切片
    return data.slice(startIndex, startIndex + this.paginator.pageSize);
  }
}

2. 确保模块中导入了MatPaginatorModule #

在你的AppModule或者当前组件所在的模块中，添加MatPaginatorModule的导入，否则分页器组件无法正常工作：

import { MatPaginatorModule } from '@angular/material/paginator';
import { MatTableModule } from '@angular/material/table';

@NgModule({
  imports: [
    // ...其他导入的模块
    MatTableModule,
    MatPaginatorModule
  ],
  declarations: [HomeComponent]
})
export class AppModule { }

3. 保留原组件中的分页器绑定 #

你原组件中的ngAfterViewInit代码无需修改，它会正确将分页器实例绑定到数据源：

ngAfterViewInit() {
  this.dataSource.paginator = this.paginator;
}

完成以上修改后，你的表格就能和分页器正常配合工作了——点击分页器的页码或调整每页显示数量时，表格会自动切换显示对应的数据。

内容的提问来源于stack exchange，提问作者Heena