Angular Таблица материалов не сортируется, не разбивается на страницы и не фильтруется (используется Angular, Nodejs & Mysql)

Question

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 Database, Angular, Angular Material Softwares.

Спасибо

Answer 1

Для сортировки вам необходимо импортировать MatSortModule в ваш соответствующий модуль.

Answer 2

Эй, ваш код выглядит хорошо с первого взгляда, но у меня есть несколько вопросов к вам, почему вы написали в html -файл по первому столбцу mat-sort header = "id" Я думаю, что вы должен удалить = "id" , потому что у ng-контейнера есть имя, которое вызывает компонент, определяющий c функции, и у вас есть несколько стилей css / s css (если вы еще этого не знали). Во-вторых, вы должны указать что-то в поле фильтра, потому что консольный журнал появляется только в том случае, если вы это делаете.