Angular *ngFor keyvalue sorting is not applied

Question

I'm trying to create a live scoreboard for a game where I'm feeding my app with a logfile.

I'm using

public players = {}; // <string, Player>

To contain a list of players where the string is the key. play.model.ts looks like this:

export class Player {
  public name: string;
  public kills: number;
  public deaths: number;

  constructor(name: string) {
    this.name = name;
    this.kills = 0;
    this.deaths = 0;
  }
}

So my view looks like this

      <tr *ngFor="let player of scoreboardService.players | keyvalue: sortByKills">
        <td>{{ player.value.name }}</td>
        <td>{{ player.value.kills }}</td>
        <td>{{ player.value.deaths }}</td>
      </tr>

and here I'm using keyvalue with the comparator function sortByKills()

  sortByKills = (p1: KeyValue<string, Player>, p2: KeyValue<string, Player>): number => {
    return p2.value.kills - p1.value.kills;
  }

The table updates correctly, however the sorting is not applied. Any suggestions?

Is this your question? https://stackoverflow.com/questions/56125874/how-sort-array-with-object-by-property-use-ngfor — Vinay Somawat, Jun 27 '20 at 11:48
Your view structure is a pipe. Then you need to create custom pipe — mr. pc_coder, Jun 27 '20 at 11:57
I'm using an object and not an array :-( I could use https://github.com/VadimDez/ngx-order-pipe but I would like to avoid that if possible. — WhitebreadHunter, Jun 27 '20 at 11:59
@pc_coder: But https://angular.io/api/common/KeyValuePipe is taking a compareFunction. Shouldnt this work? — WhitebreadHunter, Jun 27 '20 at 12:00

score 1 · Answer 1 · answered Jun 27 '20 at 12:06

Look at example I put in Demo with custom pipe

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'keyvalue'
})

export class CustomPipe implements PipeTransform {
  transform(row: any[],sortByKills:number=-1): any {
      // make your filters here 
      return row.sort((a, b) => sortByKills*(parseFloat(a.kills) - parseFloat(b.kills)));

  }
}

Angular *ngFor keyvalue sorting is not applied

1 Answers1