有时候我们需要在Angular应用程序中使用ngFor指令来迭代生成一组列表数据。为了给用户提供更好的交互体验，我们需要根据某些条件特定对列表进行排序。然而，在使用ngFor指令更改渲染数据顺序后，我们可能会面临一个问题：无法恢复到原始的数据顺序。这就是因为ngFor指令实际上不会对原始的数据顺序进行更改，而只是改变了渲染的顺序。

为了解决这个问题，我们可以创建一个新的变量并将原始数据赋值给它，以使我们能够对原始数据进行排序，而不会影响到渲染的顺序。然后，我们可以使用ngFor指令来渲染按特定顺序排列的数据。

下面是一个简单的示例，演示如何使用ngFor指令根据键值更改数据渲染的顺序，并恢复到原始数据顺序：

@Component({
  selector: 'app-example',
  template: `
    Sort data by name
    Sort data by age
    Reset data

    

      
{{row.name}} - {{row.age}}
    
  `
})
export class ExampleComponent {
  data = [
    {name: 'John', age: 25},
    {name: 'Mary', age: 30},
    {name: 'Bob', age: 20},
    {name: 'Alex', age: 35}
  ];

  // create a copy of the data
  displayData = [...this.data];

  sortDataBy(key: string) {
    this.displayData.sort((a, b) => a[key] - b[key]);
  }

  resetData() {
    this.displayData = [...this.data];
  }
}

在上面的代码示例中，我们创建了一个名为data的原始数据数组，并为其创建了一个副本displayData。我们使用ngFor指令来渲染`display