MatSort 按语言 iso 代码

Question

我正在尝试对 mat-table 中的 api 派生数据进行排序，但数据作为 ISO 代码发送，我可以使用以下库进行翻译：

https://www.npmjs.com/package/iso-639-1

this.dataSource = new MatTableDataSource(response);

<ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef>NAME</mat-header-cell>
        <mat-cell *matCellDef="let element">
            {{ getNameByCode(element.code) }}
        </mat-cell>
</ng-container>

使用此方法调用，table 中显示的名称是正确的，但数据源未更改，因此它按 ISO 而不是按名称排序。我可以在将名称提交给数据源之前翻译它们，但我想避免它，因为 ISO 代码是我稍后用于 PUT 操作的标识符。

关于如何解决这个问题有什么建议吗？

Answer 1

Add/Replace 一个新的属性回复和 show/sort 这个

我想你有一些像：

this.dataService.getData().subscribe(response)=>{
    this.dataSource = new MatTableDataSource(response);
}

您可以使用 pipe(map) 来转换响应

this.dataService.getData().pipe(
  //to add a new property "codeFormatted"
  map((res:any[])=>{
     res.forEach(x=>x.codeFormatted=this.getNameByCode(x.code)
     return res;
  })
  //or to replace
  //  map((res:any[])=>{
  //   res.forEach(x=>x.code=this.getNameByCode(x.code)
  //   return res;
  //})
).subscribe(response)=>{
    this.dataSource = new MatTableDataSource(response);
}

MatSort 按语言 iso 代码

MatSort by language iso codes

typescript

angular-material

angular

mat-table