可以在模板中定义一个变量来保存原始数据顺序，然后在需要恢复原始顺序时使用该变量。

例如，假设一个简单的列表组件，它有一个数据数组，可以通过点击按钮按特定键值重新排序，如下所示：

component.ts

export class MyListComponent {
  data = [
    { name: 'Alice', age: 25 },
    { name: 'Bob', age: 30 },
    { name: 'Charlie', age: 20 }
  ];
  sortBy = 'name';

  sortDataByKey() {
    this.data.sort((a, b) => {
      return a[this.sortBy] < b[this.sortBy] ? -1 : 1;
    });
  }
}

component.html

Sort by name
Sort by age


  

    {{i}}. {{item.name}} ({{item.age}})
  

在上面的代码中，sortDataByKey方法接受一个参数，该参数是要按其排序的键。在组件模板中，有两个按钮，可以按名称或年龄对列表进行排序。使用ngFor指令将数据循环遍历，并在每个项前显示它的索引。

现在，我们想要添加一个按钮，当它被点击时，可以恢复原始数据的顺序。我们可以这样做：

component.ts

export class MyListComponent {
  data = [
    { name: 'Alice', age: 25 },
    { name: 'Bob', age: 30 },
    { name: 'Charlie', age: 20 }
  ];
  sortBy = 'name';
  originalOrder = Array.from(this.data);

  sortDataByKey() {
    this.data.sort((a, b) => {
      return a[this.sortBy] < b[this.sortBy] ? -1 : 1;
    });
  }

  resetOrder() {
    this.data = Array.from(this.originalOrder);
  }
}

我们添加了一个名为originalOrder的变量，它使用Array.from从当前的data数组复制了一份原始顺序的副本。resetOrder方法在需要恢复原始