在 Angular 9 中按键对 json 数组进行排序 - Javascript

在 Angular 9 中，可以使用Javascript对json数组进行排序。以下是如何在Angular 9中使用Javascript实现按键对json数组进行排序的例子：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <h2>List of Users</h2>
    <table>
      <thead>
        <tr>
          <th>
            <button (click)="onSort('name')">Name</button>
          </th>
          <th>
            <button (click)="onSort('age')">Age</button>
          </th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let user of sortedUsers">
          <td>{{ user.name }}</td>
          <td>{{ user.age }}</td>
          <td>{{ user.email }}</td>
        </tr>
      </tbody>
    </table>
  `,
})
export class AppComponent {
  users = [
    { name: 'John', age: 34, email: 'john@example.com' },
    { name: 'Ben', age: 21, email: 'ben@example.com' },
    { name: 'Anna', age: 24, email: 'anna@example.com' },
  ];

  sortedUsers = this.users.slice();

  onSort(key: string) {
    this.sortedUsers.sort((a: any, b: any) => {
      if (a[key] < b[key]) {
        return -1;
      } else if (a[key] > b[key]) {
        return 1;
      } else {
        return 0;
      }
    });
  }
}

在这个例子中，我们有一个名为users的json数组，其中包含三个用户的信息。在组件的构造函数中，我们将这个数组赋值给了一个名为sortedUsers的新数组。

我们在模板中定义了两个按钮，一个用于按姓名排序，一个用于按年龄排序。当用户单击其中一个按钮时，我们调用onSort方法并传入所要排序的键。该onSort方法对sortedUsers数组进行原地排序并返回已排序的数组。我们使用slice方法创建一个新数组以避免直接修改原始的users数组。

注意，我们需要将a[key]和b[key]强制转换为字符串以确保提取的值正确进行比较。我们使用相同的比较逻辑来处理名称和年龄排序，但是在这里可以根据需要放置适当的逻辑。

该例子产生的效果如下：

可以看到，当我们按“姓名”按钮排序时，用户列表按姓名按字母顺序排序。当我们按“年龄”按钮排序时，用户列表按年龄从小到大排序。

使用这个例子作为基础，您可以修改属性和模板来适应您的特定需求。这是一个使用Javascript在Angular 9中对json数组进行排序的简单实现。