【问题标题】:Use LoDash orderBy with dynamic values for ascending or descending sort使用带有动态值的 LoDash orderBy 进行升序或降序排序
【发布时间】:2022-01-06 19:27:50
【问题描述】:

LoDash orderBy 函数非常简单 - 您将要排序的集合、要排序的属性传递给它,然后可以选择对这些属性进行排序是升序还是降序。典型用法可能如下所示:

let sortedCollection = _.orderBy(unsortedCollection, ['columnA', 'columnB'], ['asc', 'desc']);

我需要能够动态设置要排序的属性以及每个属性的排序是升序还是降序。我动态设置要排序的属性没有问题,但我不知道如何动态设置升序/降序选项。我有一个带有nameorder 属性的SortOrderItem 对象。如果ordertrue,则该属性应按升序排序,否则按降序排序。

namespace app.models {
    export class SortOrderItem {
        name: string;
        order: boolean;
    }
}

我有一个在 UI 中设置的数组(存储在一个名为 sortOrder 的数组中),当我想对我的集合进行排序时,我循环遍历数组以构建属性和(希望)排序顺序:

private getSortedRecords(unsortedCollection: any[]): any[] {
    let sortColumns: string[] = [];
    let sortOrders: string[] = [];
    _.forEach(this.sortOrder,
        (item: models.SortOrderItem) => {
            sortColumns.push(item.name);
            sortOrders.push(item.order ? 'asc' : 'desc');
        });
    return _.orderBy(unsortedCollection, sortColumns, sortOrders);
}

但是,这不起作用,因为它不喜欢第三个参数的字符串数组。我明白了:

TS2769:(TS) 没有与此调用匹配的过载。 最后一个重载给出了以下错误。 'string[]' 类型的参数不能分配给'Many '。 类型 'string[]' 不能分配给类型 'readonly (boolean | "asc" | "desc")[]'。 类型 'string' 不可分配给类型 'boolean | “升序” | “描述”'。

然后我尝试使用readonly(boolean|'asc'|'desc')[] 作为我的sortOrders 变量的类型:

let sortOrders: readonly(boolean|'asc'|'desc')[] = [];

这不起作用,因为我收到此错误:

TS2339:(TS) 属性 'push' 不存在于类型 'readonly (boolean|"asc"|"desc")[]' 上。

如何进行设置以便动态定义最后一个参数?

【问题讨论】:

    标签: typescript sorting lodash


    【解决方案1】:

    定义一个SortOrder 类型:

    type SortOrder = 'asc' | 'desc';
    

    并将其用作sortOrders的类型:

    function getSortedRecords(unsortedCollection: any[]): any[] {
      const sortColumns: string[] = [];
      const sortOrders: SortOrder[] = [];
      _.forEach(this.sortOrder,
          (item: SortOrderItem) => {
              sortColumns.push(item.name);
              sortOrders.push(item.order ? 'asc' : 'desc');
          });
      return _.orderBy(unsortedCollection, sortColumns, sortOrders);
    }
    

    【讨论】:

    • 漂亮!非常感谢,这正是我所追求的。
    • 不客气 :)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-11-05
    • 2020-06-06
    • 2021-01-26
    • 2018-05-03
    相关资源
    最近更新 更多