Javascript 使用JSON响应填充Mat表（并执行排序和筛选）

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

---

搜索和排序对响应无效。

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

从'@angular/core'导入{Component，ViewChild，AfterViewInit}；
从“@angular/material”导入{MatTableDataSource，MatPaginator，MatSort，Sort}；
从“../backup.service”导入{BackupService}；
导出接口作业{
状态：字符串
}
@组成部分({
templateUrl:'joblist.component.html'，
样式URL:['joblist.component.css']
})
导出类JoblistComponent实现AfterViewInit{
公共显示列=['status']；
公共数据源：MatTableDataSource；
@ViewChild（MatPaginator）分页器：MatPaginator；
@ViewChild（MatSort）排序：MatSort；
构造函数（私有backupService:backupService）{}
onTableDataReceived（数据：任意[]）{
this.dataSource=新MatTableDataSource（数据）；
this.dataSource.paginator=this.paginator；
this.dataSource.sort=this.sort；
}
ngAfterViewInit（）：void{
这是.getAllJobs（）；
}
公共doFilter=（值：字符串）=>{
this.dataSource.filter=value.trim（）.toLocaleLowerCase（）；
}
getAllJobs（）{
这个是.backupService.getJobs(
响应=>{
log（“响应=>”+响应）；
const data=response.jobs作为作业[]；
此.onTableDataReceived（数据）；
},
错误=>{
log（“error=>”，error）；
});
}

物料表默认按ID列排序。如果要保留后端服务排序，请将索引设置为列表项，然后将其用作排序列。这将保留后端服务的顺序

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

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

希望这有帮助

---

PS:Angular 7是版本。

在为dataSource.getAllJobs（）设置数据后，尝试设置分页器和排序。{this.backupService.getJobs（response=>{console.log（“response=>”+response）；this.dataSource.data=response.jobs as jobs[]；this.dataSource.paginator=this.paginator；this.dataSource.sort=this.sort；console.log（“dataSource=>”+this.dataSource）；}，error=>{console.log（“error=>”，error）；}）；}我尝试设置分页器并在数据源之后进行排序。它不起作用。我也面临同样的问题，即无法在JSON中直接对JSON进行排序搜索和排序此响应：{“作业”：[{“状态”：“完整”}，{“状态”：“部分”}，{“状态”：“已完成”}]}

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

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