angular - 未应用 Angular *ngFor 键值排序

Question

我正在尝试为我正在为我的应用程序提供日志文件的游戏创建实时记分牌。

我在用着

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

包含以字符串为键的玩家列表。play.model.ts 看起来像这样：

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

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

所以我的观点看起来像这样

      <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>

在这里我使用 keyvalue 和比较器函数 sortByKills()

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

该表正确更新，但未应用排序。有什么建议么？

标签： angulartypescriptkeyvaluepair

Answer 1

看看我用自定义管道放入Demo的例子

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

  }
}