Question

我尝试在Stack Overflow中进行搜索，但没有得到解决我问题的正确方法。

我没有收到任何错误，但是我的分页，排序和过滤器不起作用。

这是我的 HTML 代码

<div class="example-header">
  <mat-form-field>
    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
  </mat-form-field>
</div>
<div class="example-container mat-elevation-z8">
  <mat-table [dataSource]="MyDataSource" matSort>
    <ng-container matColumnDef="EMPID">
      <mat-header-cell *matHeaderCellDef mat-sort-header>EMPID #</mat-header-cell>
      <mat-cell *matCellDef="let dashdata">{{dashdata.EMPID}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="plNumber">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Planned Number#</mat-header-cell>
      <mat-cell *matCellDef="let dashdata">{{dashdata.plNumber}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="Fname">
      <mat-header-cell *matHeaderCellDef mat-sort-header>First Name</mat-header-cell>
      <mat-cell *matCellDef="let dashdata">{{dashdata.Fname}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="Salary_Variance">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Salary Variance</mat-header-cell>
      <mat-cell *matCellDef="let dashdata">{{dashdata.Salary_Variance}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="Skill">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Skill</mat-header-cell>
      <mat-cell *matCellDef="let dashdata">{{dashdata.Skill}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="Certificates">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Certificates</mat-header-cell>
      <mat-cell *matCellDef="let dashdata">{{dashdata.Certificates}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="status">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Status</mat-header-cell>
      <mat-cell *matCellDef="let dashdata">{{dashdata.status}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="lastUpdate">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Last Updated</mat-header-cell>
      <mat-cell *matCellDef="let dashdata">{{dashdata.lastUpdate}}</mat-cell>
    </ng-container>
    <!-- <ng-container matColumnDef="Action">
                    <mat-header-cell *matHeaderCellDef></mat-header-cell>
                    <mat-cell *matCellDef="let dashdata"  > 
                            <span *ngIf="dashdata.status === 'Data Load Pending'">
                                <mat-icon> email</mat-icon>
                            </span>
                            <span *ngIf="dashdata.status === 'pending'">
                                    <mat-icon>edit</mat-icon>
                            </span>
                    </mat-cell>
            </ng-container> -->
    <mat-header-row class="table-header" *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row [ngClass]="{'is-red': row.status === 'Data Load Pending'}" *matRowDef="let row; columns: displayedColumns">
    </mat-row>
  </mat-table>
  <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" showFirstLastButtons></mat-paginator>
</div>

这是我的服务代码

import { Injectable } from '@angular/core';
import { myDash } from '../../../../views/pages/my-dash-page/mydash'
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class MydashService {
  // serviceUrl = '../../layout/server/database.json';
  private headers = new HttpHeaders({ 'Content-Type': 'application/json' });
  // _baseUrl:string;

  private _baseUrl = '../../../../../assets/database.json'
  constructor(private httpClient: HttpClient) { }

  getUser(): Observable<myDash[]> {
    return this.httpClient.get<myDash[]>(this._baseUrl);
  }

  // private generateHeaders = () => { 
  //   return {
  //     headers: new HttpHeaders({'Content-Type': 'application/json'})
  //   }
  // }

}

这是我更新的组件代码。


      import { Component, OnInit, Input, ViewChild } from '@angular/core';
      import { MatTableDataSource,MatPaginator,MatSort } from '@angular/material';
      import { FormControl } from '@angular/forms';
      import { myDash } from './mydash';
      import { MydashService } from '../../../core/_base/layout/services/mydash.service';
      @Component({
        selector: 'kt-my-dash-page',
        templateUrl: './my-dash-page.component.html',
        styleUrls: ['./my-dash-page.component.scss']
      })
      export class MyDashPageComponent implements OnInit  {

        displayedColumns = ['EMPID', 'plNumber', 'Fname', 'Salary_Variance','Skills','Certificates','status','lastUpdate'];
        MyDataSource: MatTableDataSource<myDash>;

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

        constructor(public myDash: MydashService) {this.MyDataSource = new MatTableDataSource();}  

        ngAfterViewInit(): void {

          this.MyDataSource.sort = this.sort;  
        }
      ngOnInit(): void { 
      // this.MyDataSource.paginator = this.paginator;
        this.myDash.getUser()
          .subscribe((res)=> { 
            this.MyDataSource.data = res['studies'];
            setTimeout(() => {
              this.MyDataSource.sort = this.sort;
              this.MyDataSource.paginator = this.paginator;
            });
              console.log(this.MyDataSource);

            },error => {
              console.log('There was an error while retrieving Posts !!!' + error); 
            }
          )
      }

      applyFilter(filterValue: string) {
        this.MyDataSource.filter = filterValue.trim().toLowerCase();
      }

      }

使用上面的代码，我能够从json中获取值，并且可以在表格内进行填充，但是尽管我根据文档给出了正确的编码，但排序，分页和过滤这三项均无法正常工作。 / p>

谢谢。

Answer 1

您已经用以下这些行杀死了dataSource，特别是分配了等于此的res ['studies']的第二行。MyDataSource MyDataSource对象不再是MatTableDataSource对象：

this.MyDataSource = new MatTableDataSource(res);
this.MyDataSource = res['studies'];

删除这两行，然后执行以下操作：

this.MyDataSource.data = res['studies']

物料表排序分页并过滤所有三个都不起作用

1 个答案: