TypeScript中的排序数组（离子）答案

【问题标题】：Sorting Array in TypeScript (Ionic)TypeScript中的排序数组（离子）
【发布时间】：2021-03-19 21:27:11
【问题描述】：

我正在尝试按 id 对数组进行排序。但是，当我使用 sort() 方法时，什么也没有发生。

products.sort(function (a, b) {
  return a.id - b.id;
});

我该如何解决这个问题？

我的尝试：

constructor(private pokemonService: PokemonService, private typeColorFactory: TypeColorFactoryService, private screenOrientation: ScreenOrientation) {
    this.pokemonService.getPokemons(1).subscribe(
      res => {
        console.log(res);

        this.pokemons = res;
        this.pokemons.sort((a, b): Pokemon => {
          if (a.id < b.id) return -1;
          if (a.id > b.id) return 1;
          return 0;
        });
        console.log(this.pokemons);
      },
      err => {
        console.log('HTTP Error', err);
      }
    );
  }

数组始终保持不变！我不知道这是否重要，但是当我在排序中console.log() 时，它不会记录任何内容（但不知道这是否可能）。

型号：

pastebin.com/FLTiZPSA

数据：

更新：

const products=[
  {'id':'1','name':'A'},
  {'id':'3','name':'C'},
  {'id':'4','name':'D'},
  {'id':'2','name':'B'},
];
products.sort((a,b)=> {
  console.log("test");
  return a.id-b.id;
});
this.pokemons.sort((a,b) => {
  console.log("test");
  return a.id-b.id;
});

products.sort() 记录“测试”。

this.pokemons.sort() 不记录“测试”。

this.pokemonService 的链接：https://pastebin.com/raWJ9isP

【问题讨论】：

不，没有帮助:(我已经更新了帖子。
你能显示你的数据吗？
您的 TypeScript 格式不正确；应该是sort((a: Pokemon, b: Pokemon) => {
我试过 sort((a: Pokemon, b: Pokemon) => { ，不幸的是它没有任何区别。
您确定您的口袋妖怪具有id 属性并且拼写正确吗？

标签： angular typescript ionic-framework

【解决方案1】：

以下应该可以工作：

const products=[
  {'id':'1','name':'A'},
  {'id':'3','name':'C'},
  {'id':'4','name':'D'},
  {'id':'2','name':'B'},
];

console.log(products);

products.sort((a,b)=> a.id-b.id);

console.log(products);

这导致排序数组：

[[object Object] {
  id: "1",
  name: "A"
}, [object Object] {
  id: "2",
  name: "B"
}, [object Object] {
  id: "3",
  name: "C"
}, [object Object] {
  id: "4",
  name: "D"
}]

【讨论】：

是的，确实有效！但是，当我将其应用于我自己的对象（this.pokemons）时，它不起作用！我不明白为什么。还有一个旁注，当我在排序前后记录你的数组时。它们都已排序，即使数组初始化为未排序。
它们都没有排序，只是你的浏览器在旧的console.log中显示了新数据
好的，谢谢你的解释。你知道为什么它不适用于我的阵列（见模型：pastebin.com/FLTiZPSA）吗？
在这里我想为交叉检查添加几点：1）因为您通过引用复制响应 this.pokemons = res; ，您是在修改“res”对象还是您通过引用分配 this.pokemons 的任何地方，在这种情况下，它将通过引用获取最新的“res”的值。2）在这种情况下，您必须深度复制您的变量。

【解决方案2】：

现在试试这个。

this.lstClients = this.lstClients.sort(function (a, b) {
              if (a.id < b.id) { return -1; }
              if (a.id > b.id) { return 1; }
              return 0;
});

【讨论】：

试过了，可惜不是解决办法。

【解决方案3】：

在 cmd/终端中运行以下命令：

1. install npm install ngx-sortable app.module.ts import
2. import { NgxSortableModule } from 'ngx-sortable'
3. @NgModule({
  imports: [
    ...,
    NgxSortableModule
  ],
  ...
})

然后在您的 html 代码中为网格表编写如下所示：

<ion-col data-column="id" (click)="SortData('id')" [ngClass]="{'asc': sortColumn == 'id' && sortOrder == 'asc', 'desc': sortColumn == 'id' && sortOrder == 'asc'}">
enter code here

In .ts file

sortOrder: string = 'asc';
  sortColumn = 'eq_id';
  
  constructor() {}

    SortData(col: string): void {
    if (this.sortColumn == col) {
      if (this.sortOrder == 'asc')
        this.sortOrder = 'desc';
      else
        this.sortOrder = 'asc';
    }
    else {
      this.sortColumn = col;
      this.sortOrder = 'asc';
    }
    this.Location = this.Location.sort((a, b) => {
      if (a[col] < b[col]){
        return this.sortOrder == 'asc' ? 1 : -1;
      }
      if (a[col] > b[col])
      {
        return this.sortOrder == 'asc' ? -1 : 1;
      }
      return 0;
    })
  }

【讨论】：