Блог

почему подкачка и сортировка не работают в моей таблице mat Я поместил код html, ts, служебных файлов внизу, я думаю, что забыл кое-что, чего не понимал, Это единственное объяснение, которое я могу дать Спасибо за вашу помощь

мой файл ts находится:

 export class PersonsComponent implements OnInit, AfterViewInit {
     @ViewChild(MatSort, {static: false}) sort!: MatSort;
    @ViewChild(MatPaginator) paginator !: MatPaginator;
    
    ngAfterViewInit(): void {
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
    
    }
    
    ngOnInit() {
        this.subs.add(this.financeService.getRandomUsers()
          .subscribe((res) => {
            this.dataArray = res;
            this.dataSource = new MatTableDataSource<Element>(this.dataArray)
            this.formSubscribe();
            this.getFormsValue();
          },
           ));
    
      }
    
    
      // form subscribe
      formSubscribe() {
        if (this.name !=null){
        this.name.valueChanges.subscribe(nameValue => {
          this.filterValues['name'] = nameValue;
          this.dataSource.filter = JSON.stringify(this.filterValues);
        });
      }
      }
      // create filter
      getFormsValue() {
        this.dataSource.filterPredicate = (data: any, filter: string): boolean => {
          let searchString = JSON.parse(filter);
    
          const resultValue =
            data.name.toString().trim().toLowerCase()
              .indexOf(searchString.name.toLowerCase()) !== -1;
    
          return resultValue;
        };
        this.dataSource.filter = JSON.stringify(this.filterValues);
      }
}
 

мой html-файл является:

 <table mat-table  [dataSource]="dataSource"  class="mat-elevation-z8" matSort>
      <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.id}} </td>
  </ng-container>
       <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>
  
  <ng-container matColumnDef="username">
    <th mat-header-cell *matHeaderCellDef> username </th>
    <td mat-cell *matCellDef="let element"> {{element.username}} </td>
  </ng-container>

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



  <ng-container matColumnDef="select">
    <th mat-header-cell *matHeaderCellDef> select</th>
    <td mat-cell *matCellDef="let element"> <mat-checkbox >{{element.id}}</mat-checkbox> </td>
*matCellDef="let element"
  </ng-container>
    <ng-container matColumnDef="action">
    <th mat-header-cell *matHeaderCellDef> Action </th>
    <td mat-cell *matCellDef="let element" class="action-link">
      <a (click)="openDialog('Update',element)">Edit</a> |
      <a (click)="openDialog('Delete',element)">Delete</a>
    </td>
  </ng-container>

   <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [length]="10" [pageSizeOptions]="[2,5, 7, 10]" aria-label="Select page">
</mat-paginator>
 

и мой api-сервис.сервис-это

 import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpClient }    from '@angular/common/http'

export interface Element {
  id: number;
  name: string;
  username: string;
  email: string;
}
@Injectable({
  providedIn: 'root'
})
export class ApiServiceService {
  constructor(private http: HttpClient ) { }
 getRandomUsers(): Observable<Element> {
  const URL = 'https://jsonplaceholder.typicode.com/users';
  return this.http.get<Element>(URL);
 }
}
 

большое вам спасибо за вашу помощь

Добавьте эту функцию в свой файл ts, а затем вызовите ее в своей функции ngAfterViewInit().

  initSort(): void {
    this.dataSource.sort = this.sort;

    this.dataSource.sortingDataAccessor = (item, property) => {

      switch (property) {
        case 'id':
          return item.id;
        case 'name':
          return item.name;
        case 'username':
          return item.username;
        case 'email':
          return item.email;
        default:
          return item[property];
      }
    };
  }