当前位置: 首页 > 知识库问答 >
问题:

如何用自定义管道在angular中的自动完成下拉列表中排序(asc顺序)数据(来自数据库)

濮献
2023-03-14

app.component.html

1. import { SortPipe } from "../../../pipes/sort.pipe";
2. private sortPipe: SortPipe,
1. import { SortPipe } from '../../pipes/sort.pipe';
2.@NgModule({
  declarations: [
        SortPipe
  ], 
   providers: [SortPipe]
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();
  }
}

问题:它不是按升序显示的。我有什么遗漏要输入的吗?

共有1个答案

杨和蔼
2023-03-14

sort管道提供正确的参数,这些参数具有方向和要在app.component.html中应用排序的字段名,如下所示:

<mat-option *ngFor="let option of filteredOptions| async | sort: 'asc':'name'" [value]="option"> {{option.name}}

参考stackblitz的示例

 类似资料:
  • 我有一个表格,例如如下: 我想在特定条件下对上述数据进行排序,例如:按升序对值s2的数据进行排序,其中col2=A5,这意味着数据应按正常顺序进行排序,但如果col2='A5',则值s2的顺序应为升序或降序的行应排在第一位,如下所示。 col2='A5'中的数据应根据列values2的值按升序或降序排列。这能实现吗? 具体来说,让我们只进行排序。如果我按col2下单。行将按A1、A2、A3、A4、

  • 问题内容: 我有,其中一列包含月份名称。 如何使用字典进行自定义排序,例如: 问题答案: 首先,将月份列设为分类,然后指定要使用的顺序。 现在,当你对月份列进行排序时,它将相对于该列表进行排序: 注意:如果值不在列表中,它将被转换为NaN。 对于那些有兴趣的人来说,是一个较旧的答案 你可以创建一个中间系列,并set_index在此基础上: 如前所述,在新的熊猫中,Series可以replace更优

  • 问题内容: 我有python pandas dataframe,其中一列包含月份名称。 如何使用字典进行自定义排序,例如: 问题答案: 熊猫0.15引入了“分类系列”,该分类系列提供了一种更清晰的方法: 首先,将月份列设为分类,然后指定要使用的顺序。 现在,当您对月份列进行排序时,它将相对于该列表进行排序: 注意:如果值不在列表中,它将被转换为NaN。 对于那些有兴趣的人来说,是一个较旧的答案。

  • 我必须根据每行下拉列表的可变值对数据进行排序。 例如,我希望轮班的所有服务员都从下拉列表中处于“就绪”状态。那些下班的人有“下班”状态等。每个人的状态从下拉列表中手动更改,但是,我需要所有“准备就绪”的服务员出现在顶部,然后是所有的“下班”服务员,然后是“休假”服务员等。每次下拉列表中的状态更改时,列表应自动重新排序。 作为一个新手,我对如何实现这一点感到非常无知...我试图根据我看到的类似案例写

  • 问题内容: 我有一个清单 我想按1. 2. 3.的顺序对其进行排序。 结果: 我在stackoverflow中看到了其他类似的问题,但是没有类似的问题或对我容易适用。 问题答案: 我们在这里所做的全部工作是通过为列表中的每个元素而不是整个列表返回一个整数来提供一个新的元素进行排序。我们 可以 使用内联三元表达式,但这会有点麻烦。

  • 我想创建两个动态下拉列表框,但两个文本框的数据都来自API响应,而不是本地数据库。当我在第一个下拉列表中选择数据时,必须根据选择的数据进行REST调用,并且必须在第二个下拉列表中显示响应。有没有办法做到这一点? 我搜索这个很长时间,但我能够这样做,只使用本地数据库的数据。