Angular Material 表没有排序、分页和过滤（使用 Angular、Nodejs 和 Mysql）答案

【问题标题】：Angular Material table is not Sorting, Paginating and Filtering(using Angular, Nodejs & Mysql)Angular Material 表没有排序、分页和过滤（使用 Angular、Nodejs 和 Mysql）
【发布时间】：2020-07-03 22:38:30
【问题描述】：

HTML 文件

<mat-card>

<mat-form-field>
  <mat-label>Filter</mat-label>
  <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Bulls">
</mat-form-field>


<table mat-table [dataSource]="dataSource.data" matSort
 class="mat-elevation-z8">

  <ng-container matColumnDef="id">
    <th mat-header-cell mat-sort-header *matHeaderCellDef> Serial No </th>
    <td mat-cell *matCellDef="let element"> {{element.id}} </td>
  </ng-container>

  <ng-container matColumnDef="stud_id">
    <th mat-header-cell *matHeaderCellDef  mat-sort-header> Stud_id </th>
    <td mat-cell *matCellDef="let element"> {{element.stud_id}} </td>
  </ng-container>

  <ng-container matColumnDef="stud_app_date">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Date </th>
    <td mat-cell *matCellDef="let element"> {{element.stud_app_date | date}} </td>
  </ng-container>

  <ng-container matColumnDef="stud_first_name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.stud_first_name}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>

</mat-card>

组件文件


import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { student } from '../_interface/stud.model';
import { RegistrationService } from '../../../registration.service';
import {MatPaginator} from '@angular/material/paginator';
import {MatSort} from '@angular/material/sort';
import {Sort} from '@angular/material/sort';

@Component({
  selector: 'app-get-stud',
  templateUrl: './get-stud.component.html',
  styleUrls: ['./get-stud.component.css']
})
export class GetStudComponent implements OnInit, AfterViewInit {

  displayedColumns : string[] = ['id', 'stud_id', 'stud_app_date','stud_first_name'];

  public dataSource = new MatTableDataSource<student>();

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

  constructor(private _registrationService : RegistrationService) { }

  ngOnInit(){
    this.getAllStudents();       
    this.dataSource.paginator = this.paginator;
    // this.dataSource.sort = this.sort;
    // this.studSort();
  }


  ngAfterViewInit(): void {
    this.dataSource.sort = this.sort;
    console.log(this.sort);    
  }

  public getAllStudents = () => {
    this._registrationService.registerGetStud()
    .subscribe(res => {
      console.log(res),
      this.dataSource.data = res.response as student[],
      response => console.log('Success!',response),
              error => console.error('Error!',error);
              console.log(this.dataSource.data); 
    })
  }

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

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

材料文件

import { NgModule } from '@angular/core';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatSidenavModule} from '@angular/material/sidenav';
import {MatListModule} from '@angular/material/list';
import {MatCardModule} from '@angular/material/card';
import {MatInputModule} from '@angular/material/input';
import {MatTabsModule} from '@angular/material/tabs';
import {MatDatepickerModule} from '@angular/material/datepicker';
import {MatButtonModule} from '@angular/material/button';
import {MatDividerModule} from '@angular/material/divider';
import {MatIconModule} from '@angular/material/icon';
import {MatExpansionModule} from '@angular/material/expansion';
// import {MatDialog, MAT_DIALOG_DATA} from '@angular/material/dialog';
import {MatDialogModule} from '@angular/material/dialog';
import {MatRadioModule} from '@angular/material/radio';
import {MatTableModule} from '@angular/material/table';
import {MatPaginatorModule} from '@angular/material/paginator';
import {MatSortModule} from '@angular/material/sort';
import {MatFormFieldModule} from '@angular/material/form-field';


const MaterialComponents = [
  MatToolbarModule,
  MatSidenavModule,
  MatListModule,
  MatButtonModule,
  MatInputModule,
  MatTabsModule,
  MatCardModule,
  MatDatepickerModule,
  MatDividerModule,
  MatIconModule,
  MatExpansionModule,
  // MatDialog, MAT_DIALOG_DATA
  MatDialogModule,
  MatRadioModule,
  MatTableModule,
  MatPaginatorModule,
  MatSortModule,
  MatFormFieldModule
]

@NgModule({
  imports: [MaterialComponents],
  exports: [MaterialComponents]

})
export class MaterialModule { }

大家好，我是 Angular UI 的初学者。所以，我的表格数据没有排序、分页和过滤，即使它没有在控制台中显示任何错误。所以请任何人都可以帮助我并提出建议，我错在哪里？在这个项目中，我使用了 Nodejs、Mysql 数据库、Angular、Angular Material Softwares。

谢谢

【问题讨论】：

标签： javascript node.js angular angular-material postman

【解决方案1】：

对于排序，您需要在各自的模块中导入 MatSortModule。

【讨论】：

【解决方案2】：

嘿，您的代码乍一看还不错，但我有一些问题要问您，为什么您在 html-File 的第一列 mat-sort header="id" 我认为您应该删除 ="id" 因为 ng-container 具有组件调用特定函数的名称以及一些 css/scss 样式（如果您还不知道的话）。其次，您是否在过滤器字段中提示了一些东西，因为只有当您这样做时才会出现控制台日志。

【讨论】：