IP 的 Angular Material table 排序列表

本文介绍了IP 的 Angular Material table 排序列表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送ChatGPT账号..

此处示例

我不知道为什么材料表排序不能正确地对表进行排序，我在那里做了一个示例 stackblitz.

(预期)IP 最低的优先排序

10.16.0.8"10.16.0.16"10.16.0.32"10.16.10.35"10.16.10.64"10.16.10.120"

(预期)然后你点击按钮排序最高，你会得到

10.16.10.120"10.16.10.64"10.16.10.35"10.16.0.32"10.16.0.16"10.16.0.8"

但是现在排序时的当前输出可以是:

10.16.0.1610.16.0.3210.16.0.810.16.10.12010.16.10.3510.16.10.64

解决方案

您需要考虑到您是按字母顺序排序的(120 小于 9)，因此您需要转换您的 IP 以获得相同的位数

 ipsnormalized = this.ips//创建一个字符串，每个数字用点分隔//三位数字，例如.1.23.9.10 =>001.023.009.010.map(x => x.split(.")).map((x: string[]) => {返回 x.map(y => ("000" + y).slice(-3)).join(".");}).sort()//排序.map(x => x.split(."))//删除0"；.map((x: string[]) => {返回 x.map(y => +y).join(".");});

stackblitz

更新以对 Mat-table 进行排序，仅向您的数据添加新属性

 element = ELEMENT_DATA.map((x: any) => ({...X，标准化:x.weight.split(.").map((y: string[]) => ("000" + y).slice(-3)).join(.")}));dataSource = new MatTableDataSource(this.element);

并指示对这个属性进行排序，(this mat-sort-header="normalize")

 <ng-container matColumnDef="weight";><th mat-h​​eader-cell *matHeaderCellDef mat-sort-header="normalize">重量<td mat-cell *matCellDef=let element">{{element.weight}} </td></ng-容器>

A 新的stackblitz

Example here

I'm not sure why Material Table sorting doesn't order the table correctly I made an example stackblitz there.

(Expected) Sorted lowest IP first

"10.16.0.8"
"10.16.0.16"
"10.16.0.32"
"10.16.10.35"
"10.16.10.64"
"10.16.10.120"

(Expected) Then you click button to sort highest and you'd get

"10.16.10.120"
"10.16.10.64"
"10.16.10.35"
"10.16.0.32"
"10.16.0.16"
"10.16.0.8"

But the current output when sorting now can be :

10.16.0.16
10.16.0.32
10.16.0.8
10.16.10.120
10.16.10.35
10.16.10.64 

解决方案

you need take account that you're orderer alphabetical (120 is less than 9), so you need transform yours IPs to get the same numbers of digits

  ipsnormalized = this.ips    //create a string separated by dots each number
                              //three digits, eg. 1.23.9.10 =>001.023.009.010
    .map(x => x.split("."))
    .map((x: string[]) => {
      return x.map(y => ("000" + y).slice(-3)).join(".");
    })
    .sort()                  //sort
    .map(x => x.split("."))  //remove the "0s"
    .map((x: string[]) => {
      return x.map(y => +y).join(".");
    });

stackblitz

Updated to sort a Mat-table, only add a new property to your data

  element = ELEMENT_DATA.map((x: any) => ({
    ...x,
    normalize: x.weight
      .split(".")
      .map((y: string[]) => ("000" + y).slice(-3))
      .join(".")
  }));
  dataSource = new MatTableDataSource(this.element);

And indicate to header this property to sort, (this mat-sort-header="normalize")

    <ng-container matColumnDef="weight" >
        <th mat-header-cell *matHeaderCellDef mat-sort-header="normalize"> Weight</th>
        <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
      </ng-container>

A new stackblitz

这篇关于IP 的 Angular Material table 排序列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！