3

我是 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"
            }
        }
    ]
}

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

4

2 回答 2

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);
        });
    }

于 2019-04-18T06:58:17.863 回答
0

材料表默认按 ID 列排序。如果要保留列表项的后端服务排序集索引，然后将其用作排序列。这样就保留了后端服务的顺序。

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

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

希望这可以帮助 ！！

PS：Angular 7 是版本。

于 2019-10-24T23:27:04.940 回答