MatSort 按语言 iso 代码答案

【问题标题】：MatSort by language iso codesMatSort 按语言 iso 代码
【发布时间】：2021-10-16 06:09:01
【问题描述】：

我正在尝试在 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>

通过此方法调用，表中显示的名称是正确的，但数据源没有改变，因此它按 ISO 排序而不是按名称排序。我可以在将名称提交到 dataSource 之前对其进行翻译，但我想避免这样做，因为 ISO 代码是我稍后用于 PUT 操作的标识符。

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

【问题讨论】：

标签： angular typescript angular-material mat-table

【解决方案1】：

在您的响应中添加/替换一个新属性并显示/排序这个

我想你有一些类似的东西：

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

【讨论】：