Javascript 通过切换函数对数字进行角度排序

所以我想在这里对数字“2”，“20”，“3”，“30”，“21”进行排序 按照从升序到降序的正确顺序排序，类似于切换函数

然而，它似乎是从命令 30 3. 21 20 2. 再次单击功能按钮时： 2. 20 21 3. 30 分类

代码：

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  isAscendic = true
   fruits: any = ["2", "20", "3", "30", "21", ];





 <ul>
      <li *ngFor="let fruit of fruits">{{fruit}}
      </li>
    </ul>

    <button (click)="send()">Sort </button>

从'@angular/core'导入{Component}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
名称='角度'；
isAscendic=true
水果：任何=[“2”、“20”、“3”、“30”、“21”]；

{{fruit}


分类

您处理的是数字，而不是字符串。您正在比较字符串，因此首先需要将它们转换为数字：

if (+a1 < +a2) {
  //^---- note the + on both a1 and a2.
    return 1;
}
if (+a1 > +a2) {
    return -1;
}

然后使用

numericFruits

而不是

ruits

完整代码：

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  isAscendic = true
   fruits: any = ["2", "20", "3", "30", "21", ];

   send(){
     this.isAscendic?this.ascendic():this.descendic()
   }

  protected get numericFruits() {
    return this.fruits.map(i => Number(i));
  }

  ascendic(){
    this.isAscendic = false;
     this.fruits = this.numericFruits.sort((a1,a2) => {
        if (a1 < a2) {
            return 1;
        }
        if (a1 > a2) {
            return -1;
        }
        return 0;
    });
  }

  descendic(){
    this.isAscendic = true
  this.fruits = this.numericFruits.sort((a1,a2) => {
    if (a1 > a2) {
        return 1;
    }
    if (a1 < a2) {
        return -1;
    }
    return 0;
});
  }
}

从'@angular/core'导入{Component}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
名称='角度'；
isAscendic=true
水果：任何=[“2”、“20”、“3”、“30”、“21”]；
发送（）{
this.isAscendic？this.ascendic（）：this.decendic（）
}
受保护的获取数字水果（）{
返回这个.fruits.map（i=>Number（i））；
}
上升的{
this.isAscendic=false；
this.fruits=this.numericFruits.sort（（a1，a2）=>{
if（a1a2）{
返回-1；
}
返回0；
});
}
后代的{
this.isAscendic=true
this.fruits=this.numericFruits.sort（（a1，a2）=>{
如果（a1>a2）{
返回1；
}
if（a1

工作人员突击检查：

问题 您正在将字符串值与比较器

和

{
如果（+a1<+a2）{
返回1；
}
如果（+a1>+a2）{
返回-1；
}
返回0；
});
}
后代的{
this.isAscendic=true
this.fruits=this.fruits.sort（（a1，a2）=>{
如果（+a1>+a2）{
返回1；
}
如果（+a1<+a2）{
返回-1；
}
返回0；
});
}
判定元件
}

---

工作副本在这里-

使用字符串时，可以将值转换为数字，并将增量作为排序结果

this.fruits = this.fruits.sort((a, b) => +a - +b); // asc
this.fruits = this.fruits.sort((a, b) => +b - +a); // desc

---

非常酷，谢谢，嗯，如果一个数字被设置为空会发生什么？它将转换为

NaN

，最终所有条件都将是

false

。它不会抛出任何错误。

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  isAscendic = true
   fruits: any = ["2", "20", "3", "30", "21", ];

   send(){
     this.isAscendic?this.ascendic():this.descendic()
   }

  ascendic(){
    this.isAscendic = false;
     this.fruits = this.fruits.sort((a1,a2) => {
    if (+a1 < +a2) {
        return 1;
    }
    if (+a1 > +a2) {
        return -1;
    }
    return 0;
});
  }

  descendic(){
    this.isAscendic = true
  this.fruits = this.fruits.sort((a1,a2) => {
    if (+a1 > +a2) {
        return 1;
    }
    if (+a1 < +a2) {
        return -1;
    }
    return 0;
});
  }

  de
}

this.fruits = this.fruits.sort((a, b) => +a - +b); // asc
this.fruits = this.fruits.sort((a, b) => +b - +a); // desc