IP的Angular Material表排序列表 [英] Angular Material table sorting list of IPs

问题描述

此处的示例

我不确定为什么材料表排序不能正确地排序表，所以我在那里做了一个例子.

(预期)，优先级最低的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表进行排序，仅向数据中添加新属性

 元素= ELEMENT_DATA.map((x:any)=>({...X，归一化:x.weight.split(.").map((y:string [])=>(("000" + y).slice(-3)).join(.")}));dataSource =新的MatTableDataSource(this.element); 

并向标头指示此属性进行排序，(此 mat-sort-header ="normalize" )

 < ng容器matColumnDef ="weight"><第一个mat-h​​eader-cell * matHeaderCellDef mat-sort-header =归一化"重量/重量< td mat-cell * matCellDef ="let element">{{element.weight}}</td></ng-container> 

新的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表排序列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！