如何解决如何使用自定义管道在自动完成下拉列表中排序升序数据来自数据库
app.component.html
app.component.ts
1. import { SortPipe } from "../../../pipes/sort.pipe";
2. private sortPipe: SortPipe,
app.module.ts
1. import { SortPipe } from '../../pipes/sort.pipe';
2.@NgModule({
declarations: [
SortPipe
],providers: [SortPipe]
自定义管道
共享 --> 管道 --> sort.pipe.ts
import { Injectable,Pipe,PipeTransform } from '@angular/core';
export type SortOrder = 'asc' | 'desc';
@Injectable()
@Pipe({
name: 'sort',})
export class SortPipe implements PipeTransform {
transform(value: any,sortOrder: SortOrder | string = 'asc',sortKey?: string): any {
sortOrder = sortOrder && (sortOrder.toLowerCase() as any);
if (!value || (sortOrder !== 'asc' && sortOrder !== 'desc')) 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.concat(stringArray);
return sortOrder === 'asc' ? sorted : sorted.reverse();
}
}
问题:它不是按升序显示的。有什么我想输入的吗?
解决方法
为您的 sort
管道提供正确的参数,该管道具有方向和要在 app.component.html 中应用排序的字段名称,如下所示:
<mat-option *ngFor="let option of filteredOptions| async | sort: 'asc':'name'" [value]="option"> {{option.name}}
参考stackblitz的例子
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。