Angular - 将动态字符串属性名称传递给排序和对象数组

Question

我正在尝试按属性名称动态对简单对象进行排序。

  sampleArr: {
    name: string;
    age: number;
    }[ ] = [
    { name: "Michael", age: 21},
    { name: "Adam", age: 35 },
    { name: "Zoe", age: 11 },
    ];

我知道按字符串列排序与按数字列排序不同，所以我们暂时把它放在一边。让我们重点关注字符串列。

this.sampleArr.sort((a, b) => a.name.localeCompare(b.name))

上面的代码工作得很好。但是，我对名称列进行了硬编码。我想让它充满活力。

假设我有一个包含多个字符串字段的数组，我让用户可以选择要排序的列。例如...我希望能够将列名称作为字符串 (sortBy) 传递，并使用它来确定要排序的字段。

所以本质上，我将用 a[sortBy] 和 b[sortBy] 替换硬编码的 a.name 和 b.name

sampleArrSort(sortBy: string) {
    // this.sampleArr.sort((a, b) => a.name.localeCompare(b.name))
    this.sampleArr.sort((a, b) => a[sortBy].localeCompare(b[SortBy]))

    console.log(this.sampleArr);
  }

但是，我收到以下错误。

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ name: string; age: number; }'.
  No index signature with a parameter of type 'string' was found on type '{ name: string; age: number; }'.ts(7053)

有谁知道如何解决这个问题吗？

感谢您的帮助。

我已经到处搜索，似乎无法将我找到的代码片段适应我的场景。 我可能需要使用keyOf？我不确定

Answer 1

您应该为数组项创建一个单独的接口：

export interface SampleArr {
    name: string;
    age: number;
}

然后您可以使用

keyof

操作符仅允许该界面的按键：

sampleArrSort(sortBy: keyof SampleArr) {
    this.sampleArr.sort((a, b) => a[sortBy].localeCompare(b[sortBy]))

    console.log(this.sampleArr);
}