如果我将 dataSource 定义为 dataSource:any[]，我该如何对我的 mat-table 应用分页器和排序？

Question

我刚刚制作了一个 mat-table，它通过 http API 调用填充自身；它工作正常；但现在我正在尝试添加分页和排序，但我收到了这样的错误（实际上是多个错误）“属性 'paginator' 在类型 'any[]'.48 this.dataSource.paginator 上不存在= this.paginator;"这是因为我将 DataSource 定义为 'any';但我没有办法解决这个问题，因为我的数据源正在从 API 中提取数据，而且我无法将数据定义为任何东西。这是我的代码。

import { Component } from '@angular/core';  
import {ServiceService} from './service.service';  
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { MatTableModule } from '@angular/material/table';
import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { ViewChild } from '@angular/core';
@Component({  
  selector: 'app-root',  
  templateUrl: './app.component.html',  
  styleUrls: ['./app.component.css']  
})  
export class AppComponent {  
  title = 'EmployeeFE';  
     
  constructor(private ServiceService: ServiceService) { }  
  data: any;  
  EmpForm: FormGroup;  
  submitted = false;   
  EventValue: any = "Save";  
  dataSource: any[];
  displayedColumns: string[] = [
    "eId",
    "eName",
    "eAddress",
    "eAge",
    "editAction",
    "deleteAction"
  ];

  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
  @ViewChild(MatSort, { static: true }) sort: MatSort;

  ngOnInit(): void {  
    this.getdata();  

    this.EmpForm = new FormGroup({  
      eId: new FormControl(null),  
      eName: new FormControl("",[Validators.required]),        
      eAddress: new FormControl("",[Validators.required]),  
      eEmail:new FormControl("",[Validators.required]),  
      eAge: new FormControl("",[Validators.required]),  
    })    
  }

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

  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();

    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }

  getdata() {  
    this.ServiceService.getData().subscribe((data: any[]) => {  
      this.data = data;
      this.dataSource = data;
    })  
  }  


}

有什么想法吗？

Answer 1

声明应该是

dataSource = new MatTableDataSource<any>()

在数据源中设置数据

this.dataSource.data = data;

更新代码

import { Component } from '@angular/core';  
import {ServiceService} from './service.service';  
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { MatTableModule } from '@angular/material/table';
import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { ViewChild } from '@angular/core';
@Component({  
  selector: 'app-root',  
  templateUrl: './app.component.html',  
  styleUrls: ['./app.component.css']  
})  
export class AppComponent {  
  title = 'EmployeeFE';  
     
  constructor(private ServiceService: ServiceService) { }  
  data: any;  
  EmpForm: FormGroup;  
  submitted = false;   
  EventValue: any = "Save";  
  public dataSource = new MatTableDataSource<any>()
  displayedColumns: string[] = [
    "eId",
    "eName",
    "eAddress",
    "eAge",
    "editAction",
    "deleteAction"
  ];

  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
  @ViewChild(MatSort, { static: true }) sort: MatSort;

  ngOnInit(): void {  
    this.getdata();  

    this.EmpForm = new FormGroup({  
      eId: new FormControl(null),  
      eName: new FormControl("",[Validators.required]),        
      eAddress: new FormControl("",[Validators.required]),  
      eEmail:new FormControl("",[Validators.required]),  
      eAge: new FormControl("",[Validators.required]),  
    })    
  }

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

  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();

    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }

  getdata() {  
    this.ServiceService.getData().subscribe((data: any[]) => {  
      this.data = data;
      this.dataSource.data = data;
    })  
  }  


}

如果我将 dataSource 定义为 dataSource:any[]，我该如何对我的 mat-table 应用分页器和排序？

How do I apply paginator and sorting to my mat-table if im defining dataSource as dataSource: any[]?

http

crud

angular

mat-table