如何在Angular中防止“自动按字母顺序排序对象属性”？

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'orderKeys'
})
export class OrderKeysPipe implements PipeTransform {
  transform(value: any): string[] {
    if (!value) {
      return [];
    }
    
    // 按照你期望的顺序手动定义属性数组
    const order = ['name', 'age', 'gender', 'email'];
    
    // 将对象属性按照指定顺序排序并返回
    return Object.keys(value).sort((a, b) => order.indexOf(a) - order.indexOf(b));
  }
}

<div *ngFor="let key of obj | orderKeys">
  {{ key }}: {{ obj[key] }}
</div>

@Component({
  selector: 'app-example',
  template: `
    <div *ngFor="let key of getOrderedKeys(obj)">
      {{ key }}: {{ obj[key] }}
    </div>
  `
})
export class ExampleComponent {
  obj: any = {
    name: 'John',
    age: 25,
    gender: 'Male',
    email: 'john@example.com'
  };

  // 自定义排序函数
  getOrderedKeys(obj: any): string[] {
    if (!obj) {
      return [];
    }

    // 按照你期望的顺序手动定义属性数组
    const order = ['name', 'age', 'gender', 'email'];

    // 将对象属性按照指定顺序排序并返回
    return Object.keys(obj).sort((a, b) => order.indexOf(a) - order.indexOf(b));
  }
}