问题描述
我想实现 img 用于通过自定义管道按所有字段对表进行排序。如果我只使用 Asc 和 Desc 管道,它可以正常工作,但是当我添加 (-) for 而不进行排序时,它无法正常工作。
默认情况下使用按钮图像破折号获取 API 响应,但是当我将其升序更改时,它第一次获取 sortValue 管道破折号,因此当我第一次单击时它不起作用,但是当我第二次单击降序时,它得到了完美的结果.. html:
<div class= "row">
<div class="col-md-2">
<input
[(ngModel)]="name"
class="form-control"
placeholder=" name"
/>
<button
class="filter-down-arrow"
(click)="changeOrder(sortIconLabel,'label')"
>
<img *ngIf="expression" src="assets/images/arrow-{{sortIconLabel }}.png"/>
</button>
</div>
<div class="col-md-2">
<input
class="form-control"
[(ngModel)]="location"
placeholder="Location"
/>
<button
class="filter-down-arrow"
(click)="changeOrder(sortIconlocation,'locations')"
>
<img src="assets/images/arrow-{{ sortIconlocation }}.png" />
</button>
</div>
</div>
<nb-card
*ngFor="
let area of lstUser
| sortOrder: sortOrderBy:sortValue:'label';
let i = index
"
>
<nb-card-body class="p-0">
<div class="row m-0">
<div class="col-md-1 pl-1 pr-0 align-self-center">
<div class="area-image mx-auto"></div>
</div>
<div class="col-md-2 mt-4">
<label class="label d-block">{{ content.zone }}</label
><strong>{{ area.label }}</strong>
</div>
<div class="col-md-1 mt-4">
<label class="label d-block">{{ content.locations }}</label
><strong>{{ area.location_count | number }}</strong>
</div>
</div>
</nb-card-body>
</nb-card>
Ts
sortIconLabel: any = "dash";
sortValue: any;
sortIconlocation: any = "dash";
sortOrderBy: any;
changeOrder(field,field_value): void {
this.sortOrderBy = field;
this.sortValue = field_value;
if (field_value == "label") {
this.sortIconLabel = this.sortIconLabel == "asc" ? "desc" : "asc";
}
if (field_value == "locations") {
this.sortIconlocation= this.sortIconlocation== "asc" ? "desc" : "asc";
}
}
自定义管道
import { Injectable,Pipe,PipeTransform } from '@angular/core';
export type SortOrder = 'asc' | 'desc' | 'dash';
@Injectable()
@Pipe({
name: 'sortOrder',})
export class SortpipeDirective implements PipeTransform {
transform(value: any[],sortOrder: SortOrder | string = 'asc',sortKey?: string): any {
sortOrder = sortOrder && (sortOrder.toLowerCase() as any);
if (!value || (sortOrder === 'dash' )) return value;
let numberArray = [];
let stringArray = [];
if (!sortKey) {
numberArray = value.filter(item => typeof item === 'number').sort();
stringArray = value.filter(item => typeof item === 'string').sort();
} else {
numberArray = value.filter(item => typeof item[sortKey] === 'number').sort((a,b) => a[sortKey] - b[sortKey]);
stringArray = value
.filter(item => typeof item[sortKey] === 'string')
.sort((a,b) => {
if (a[sortKey] < b[sortKey]) return -1;
else if (a[sortKey] > b[sortKey]) return 1;
else return 0;
});
}
const sorted = [
...numberArray,...stringArray,...value.filter(
item =>
typeof (sortKey ? item[sortKey] : item) !== 'number' &&
typeof (sortKey ? item[sortKey] : item) !== 'string',),];
return sortOrder === 'asc' ? sorted : sorted.reverse();
}
}
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)