我在 HTML 中有 2 個下拉串列，即排序依據和排序依據。
Sort - ['SKU', 'Planned', 'Actual', 'Variation', 'OR%']
Order By - ['A-Z', 'Z-A'];
在 UI 中，用戶將選擇“排序”下拉選單和“排序依據”下拉選單，根據所選值，我正在對資料進行排序。
我做了下面的代碼作業正常，但我正在尋找一些常見的邏輯，如 switch case 或任何其他最小和冗余代碼。
誰能幫我創建一些通用的功能邏輯而不是多個 if else。
HTML 代碼
<mat-label>Order By:</mat-label>
<mat-select class="mkline-input" (selectionChange)="sortData()" formControlName="orderBy">
<mat-option *ngFor="let type of sortValue" [value]="type"> {{type}}
</mat-option>
</mat-select>
<mat-label>Sort By :</mat-label>
<mat-select (selectionChange)="sortData()" class="mkline-input" formControlName="sortBy">
<mat-option *ngFor="let column of columnName" [value]="column"> {{column}}
</mat-option>
</mat-select>
下面是我的代碼
sortData() {
const sort = this.orLosstreeSortingForm.controls['sortBy'].value;
const orderBy = this.orLosstreeSortingForm.controls['orderBy'].value;
if (sort === 'SKU' && orderBy === 'A-Z' || sort === 'SKU' && orderBy === 'Z-A') {
const direction = orderBy === 'A-Z' ? 1 : -1;
this.setDataResponse.factORLossTree.sort((a, b) => a.skuDescription.localeCompare(b.skuDescription) * direction);
}
if (sort === 'Planned' && orderBy === 'A-Z') {
this.setDataResponse.factORLossTree.sort((a, b) => a.plannedVolume - b.plannedVolume);
}
else if (sort === 'Planned' && orderBy === 'Z-A') {
this.setDataResponse.factORLossTree.sort((a, b) => b.plannedVolume - a.plannedVolume);
}
if (sort === 'Actual' && orderBy === 'A-Z') {
this.setDataResponse.factORLossTree.sort((a, b) => a.actualVolume - b.actualVolume);
}
else if (sort === 'Actual' && orderBy === 'Z-A') {
this.setDataResponse.factORLossTree.sort((a, b) => b.actualVolume - a.actualVolume);
}
if (sort === 'Variation' && orderBy === 'A-Z') {
this.setDataResponse.factORLossTree.sort((a, b) => a.variance - b.variance);
}
else if (sort === 'Variation' && orderBy === 'Z-A') {
this.setDataResponse.factORLossTree.sort((a, b) => b.variance - a.variance);
}
}
API 回應
this.setDataResponse.factORLossTree = [
{
actualVolume: 6598
or: 30.268
plannedVolume: 26798
skuDescription: "Blue DWLREG POUCH 20X750ML"
variance: 15200
},
{
actualVolume: 6200
or: 13.345
plannedVolume: 25800
skuDescription: "Red DWLREG POUCH 20X750ML"
variance: 16000
},
{
actualVolume: 4500
or: 22
plannedVolume: 21798
skuDescription: "ABC DWLREG POUCH 20X750ML"
variance: 16500
},
{
actualVolume: 2500
or: 24.268
plannedVolume: 22798
skuDescription: "Test DWLREG POUCH 20X750ML"
variance: 17000
}
];
uj5u.com熱心網友回復：
您可以創建一個新的 customSortFunction：
function customSortFunction(arr, sortField, direction){
return arr.sort((a,b)=>{
if(isNaN(a[sortField])){ // compare strings
return a[sortField].localeCompare(b[sortField]) * direction;
}else{// compare numbers
// you can also do a parseInt() here in case of the field value is "123"
return (a[sortField] - b[sortField]) * direction ;
}
}) ;
}
并在你的函式中呼叫這個函式。有人這樣想：
sortData() {
const sort = this.orLosstreeSortingForm.controls['sortBy'].value;
const orderBy = this.orLosstreeSortingForm.controls['orderBy'].value;
const direction = orderBy === 'A-Z' ? 1 : -1;
const sortField={
'SKU':'skuDescription',
'Planned':'plannedVolume',
'Actual':'actualVolume',
'Variation':'variance',
'OR%':'or'
};
const sortedArray = this.customSortFunction(
this.setDataResponse.factORLossTree,
sortField[sort],
direction);
}
uj5u.com熱心網友回復：
**
ts代碼
**
items = [
{
actualVolume: 1,
skuDescription: 'A',
variance: 15,
},
{
actualVolume: 2,
skuDescription: 'C',
variance: 16,
},
{
actualVolume: 3,
skuDescription: 'D',
variance: 14,
},
{
actualVolume: 4,
skuDescription: 'B',
variance: 17,
},
];
sort = ['skuDescription', 'actualVolume', 'variance'];
orderby = ['A-Z', 'Z-A'];
selectedtype: string;
selectedorder: string;
sortdata(type, order) {
if (order === 'A-Z') {
this.items.sort((a, b) => 0 - (a[type] > b[type] ? -1 : 1));
} else {
this.items.sort((a, b) => 0 - (a[type] > b[type] ? 1 : -1));
}
}
**
html代碼
**
<span *ngFor="let i of items" style="display: flex">
{{ i.skuDescription }}
</span>
<select [(ngModel)]="selectedtype">
<option *ngFor="let type of sort">{{ type }}</option>
</select>
<select [(ngModel)]="selectedorder">
<option *ngFor="let type of orderby">{{ type }}</option>
</select>
<button label="sort" (click)="sortdata(selectedtype, selectedorder)">
Sort
</button>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/441055.html
標籤：javascript 有角度的 打字稿 排序 角8