Bonjour, je galère depuis des heures à chercher comment ordonner une liste des heros en nombre croissant/Decroissant

Voila je rencontre un petit problème avec mon code.

Mon code Service TypeScript qui contien les heros

private heroes = [
    {
      id: 0,
      name: 'Batman',
      power: 'lames',
      alterego: 'Souris'
    },
    {
      id: 1,
      name: 'Sangoku',
      power: 'boule de feu',
      alterego: 'picsou'
    },
    {
      id: 2,
      name: 'Spiderman',
      power: 'toile',
      alterego: 'areignée'
    }
  ];
  getHeroes() {
   return this.subject.next(this.heroes);
  }
  addHeros(heros: AddHeroService) {
    console.log('le hero ajoute ', heros);
    this.heroes.push(heros);
  }

Ma methode type script qui recupere les heros

...
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
...
  ngOnInit() {
    this.Myheros.subject.subscribe((myheros: any) => {
      this.allheroes = myheros;
    });
    this.Myheros.getHeroes();
  }

Le template qui affiche les heros

<h2>Tous les heros</h2>
<ul class="list-group">
    <li class="list-group-item" *ngFor="let hero of allheroes'">
        <span class="badge">{{hero.power}}</span> {{hero.name}}
    </li>
</ul>

Ce que je veux

Jusque là le code marche. Mais je voudrais afficher la liste des héros en ordre croissant, c-a-d commençant par l'id le plus grand dans mon object.

<li class="list-group-item" *ngFor="let hero of allheroes | orderBy: '- hero.id'">
        <span class="badge">{{hero.power}}</span> {{hero.name}}
    </li>

Ce que j'obtiens

J'obtien une erreur quant j'ajoute le pipe orderBy[Angular] The pipe 'orderBy' could not be found
property allheroes of AppComponent

Besoin d'aide svp, j' en ai besoin, je galère.

Merci

Hello,

Tu peux simplement faire un .sort dans le controleur

this.allHeroes = myHeros.sort((a, b) => a.id < b.id ? 1 : -1);

ps: attention au nom de tes variables, il vaut mieux utiliser du camel case