Question

我是Angular 7的新手，正在Angular Mat表上工作以显示来自后端服务器的响应，并对数据执行排序，过滤和分页。

分页工作正常，但是排序和过滤工作不正常。我还导入了所有必需的模块。有人可以帮我吗？

Joblist.component.ts

import { Component ,ViewChild, OnInit ,AfterViewInit} from '@angular/core';
import { MatTableDataSource,MatPaginator,MatSort,Sort} from '@angular/material';
import { BackupService } from '../backup.service';

export interface jobs{
  status : string

}

@Component({
    templateUrl :'joblist.component.html',
    styleUrls :['joblist.component.css']
})

export class JoblistComponent  implements OnInit,AfterViewInit{
  public displayedColumns = ['status'];
  public dataSource = new MatTableDataSource<jobs>();


  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  constructor(private backupService: BackupService) { }

    ngOnInit()
    {
       this.getAllJobs(); 
    }

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

    public doFilter = (value: string) => {
      this.dataSource.filter = value.trim().toLocaleLowerCase();
    }

    getAllJobs() {
      this.backupService.getJobs(
        response => {
          console.log("response =>"+response);    
          this.dataSource.data = response.jobs as jobs[];
          console.log("datasource =>"+this.dataSource);
        },
        error => {
          console.log("error=>", error);
        });
    }

joblist.component.html

<div fxLayout fxLayoutAlign="center center">
  <mat-form-field fxFlex="40%">
    <input matInput type="text" (keyup)="doFilter($event.target.value)" placeholder="Filter">
  </mat-form-field>
</div>
<div class="mat-elevation-z8">
<mat-paginator [pageSizeOptions]="[5, 10, 20,50,100]" showFirstLastButtons></mat-paginator>
<table mat-table [dataSource]="dataSource" matSort >
  <ng-container matColumnDef="status">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Status</th>
    <td mat-cell *matCellDef="let element"> {{element.jobSummary.status}} </td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>

来自后端服务器的响应

{
    "jobs": [
        {
            "jobSummary": {
                "status": "full"
            }
        },
        {
            "jobSummary": {
                "status": "completed"
            }
        },
        {
            "jobSummary": {
                "status": "partial"
            }
        }
    ]
}

搜索和排序对响应不起作用。

Answer 1

我认为这可能是数据源初始化问题。

import { Component ,ViewChild ,AfterViewInit} from '@angular/core';
import { MatTableDataSource,MatPaginator,MatSort,Sort} from '@angular/material';
import { BackupService } from '../backup.service';

export interface jobs{
  status : string

}

@Component({
    templateUrl :'joblist.component.html',
    styleUrls :['joblist.component.css']
})

export class JoblistComponent  implements AfterViewInit{
  public displayedColumns = ['status'];
  public dataSource: MatTableDataSource;


  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  constructor(private backupService: BackupService) { }

    onTableDataReceived(data: any[]) {
      this.dataSource = new MatTableDataSource(data);
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
    }

    ngAfterViewInit(): void {
      this.getAllJobs(); 
    }

    public doFilter = (value: string) => {
      this.dataSource.filter = value.trim().toLocaleLowerCase();
    }

    getAllJobs() {
      this.backupService.getJobs(
        response => {
          console.log("response =>"+response);    
          const data = response.jobs as jobs[];
          this.onTableDataReceived(data);
        },
        error => {
          console.log("error=>", error);
        });
    }

Answer 2

材料表默认在ID列上排序。如果要将后端服务订购集索引保留到列表项，然后将其用作排序列。这将保留后端服务的顺序。

在我的情况下，我必须对不是asc / desc的字段值进行排序，并在后端分配优先级，然后在UI中显示。

    Long[] idx = { 0L };
    list.forEach(a->a.setOrderId(idx[0]++));
  return list;

希望这会有所帮助！

PS：Angular 7是该版本。

使用JSON响应填充Mat表（并执行排序和过滤）

2 个答案: