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(.");});
已更新以对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-header-cell * matHeaderCellDef mat-sort-header =归一化"重量/重量< td mat-cell * matCellDef ="let element">{{element.weight}}</td></ng-container>
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(".");
});
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>
这篇关于IP的Angular Material表排序列表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!