javascript - angular Sortera siffror med växlingsfunktion

Så vad jag försöker göra här är att sortera siffrorna "2", "20", "3", "30", "21" i korrekt ordning från stigande till fallande, ungefär som en växlingsfunktion.

Men det verkar som om det sorterar från 30 3 21 20 2 och när man klickar på funktionsknappen igen: 2 20 21 3 30 Sortera

Kod :

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>

Svar #1

Du hanterar nummer, inte strängar. Du jämför strängar istället, så du måste först omvandla dem till nummer:

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

Uppdaterad (fungerande) stackblitz:

https://stackblitz.com/edit/angular-hzfjd7?file=src/app/app.component.ts

En annan möjlig metod är att först kartlägga objekten, och använda den kartlagda arrayen istället.

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

Använd sedan numericFruits istället för fruits.

Fullständig kod:

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;
});
  }
}

Arbetande stackblitz:

https://stackblitz.com/edit/angular-f5ox91?file=src/app/app.component.ts

Svar #2

När du använder strängar kan du konvertera värdena till ett nummer och ta differensen som resultat för sortering.

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