PrimeNg 表未按角度对类数组进行排序

Posted 2023-03-13

【中文标题】PrimeNg 表未按角度对类数组进行排序

【英文标题】：PrimeNg table not sorting array of classes in angular

【发布时间】：2019-09-12 21:42:50

【问题描述】：

团队数据以json格式存储，并转换为ptable中默认不排序的Team类。

我已经仔细检查了所有导入并添加了可以工作的可排序列，但表格仍然不会默认排序。

排名.html

<p-table [value]="teams" sortField="seed" sortOrder="1">
    <ng-template pTemplate="colgroup">
        <colgroup>
            <col [style.width]="'50px'">
            <col [style.width]="'105px'">
            <col [style.width]="'55px'">
            <col [style.width]="'60px'">
            <col [style.width]="'60px'">
            <col [style.width]="'70px'">
            <col [style.width]="'60px'">
        </colgroup>
    </ng-template>
    <ng-template pTemplate="header">
        <tr>
            <th [pSortableColumn]="'seed'">Seed</th>
            <th>Team</th>
            <th [pSortableColumn]="'wins'">Wins</th>
            <th [pSortableColumn]="'losses'">Losses</th>
            <th [pSortableColumn]="'ptsFor'">Points For</th>
            <th [pSortableColumn]="'ptsAgainst'">Points Against</th>
            <th>Streak</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-team>
        <tr class="body">
            <td> team.seed </td>
            <td><a routerLink="/details/ team.id ">team.team</a></td>
            <td> team.wins </td>
            <td> team.losses </td>
            <td> team.ptsFor </td>
            <td> team.ptsAgainst </td>
            <td> team.streak </td>
        </tr>
    </ng-template>
</p-table>

排名.component.ts

import  Component, OnInit  from '@angular/core';
import  DataService  from '../data.service';
import  Observable  from 'rxjs';
import  TableModule  from 'primeng/table';
import  Team  from '../entities/Team';

@Component(
  selector: 'app-standings',
  templateUrl: './standings.component.html',
  styleUrls: ['./standings.component.scss']
)
export class StandingsComponent implements OnInit 

  teams: Team[];
  title: string;

  constructor(private data: DataService)  

  ngOnInit() 
    this.title = "League Standings";
    this.teams = [];
    this.data.getTeams().subscribe(
      res => 
        for(let i=0; i< res.length; i++)
          let tmp = res[i];
          this.teams.push(
            new Team(tmp.seed, tmp.id, tmp.team, tmp.opponent, 
            tmp.scores, tmp.against, tmp.record, tmp.streak, tmp.players)
          )      
        
      
    );
  

来自 json 的团队对象示例

        "seed": 4,
        "id": "ABL",
        "team": "The Airballers",
        "opponent": ["PRF","MBD","PRC","PRG","BRK","PRF","MBD"],
        "record": ["W", "W", "L", "L", "W", "L", "L"],
        "wins": 0,
        "losses": 0,
        "scores": [84,61,54,56,79,89,76],
        "avgPts": 0,
        "ptsFor": 0,
        "against": [55,54,62,59,59,92,77],
        "ptsAgainst": 0,
        "streak": "L2",
        "players": ["p1", "p2", "p3", "p4", "p5", "p6"]
    

Team 实体，其中调用的函数只是进行计算

export class Team 
    seed: number;
    id: string;
    team: string;
    opponent: string[];
    record: string[];
    wins: number;
    losses: number;
    scores: number[];
    ptsFor: number;
    against: number[];
    ptsAgainst: number;
    players: string[];
    avgPts: number;
    streak: string;

    constructor(seed: number, id: string, team: string, opponent: string[], scores: number[], against: number[], record: string[], streak: string, players: string[]) 
        this.seed = seed;
        this.id = id;
        this.team = team;
        this.opponent = opponent;
        this.scores = scores;
        this.avgPts = this.avgPoints(scores);
        this.ptsFor = this.totalPoints(scores);
        this.against = against;
        this.ptsAgainst = this.totalPoints(against);
        this.record = record;
        this.wins = this.getWins(record);
        this.losses = this.getLosses(record);
        this.streak = streak;
        this.players = players;
    

我希望在网站加载时按团队对团队进行排序，但事实并非如此

【参考方案1】：

我认为您的问题在于指定 sortField 值。你可以通过两种方式做到这一点：

在你的模板中，就像你现在做的那样。在这种情况下，您需要记住您传递的是一个变量，而不是您想要排序的字段的名称。所以，你的代码应该是：

<p-table [value]="teams" sortField="'seed'" sortOrder="1">

您可以在组件中声明一个变量并将其传递给 p-table 组件：

export class StandingsComponent implements OnInit 
    teamsSortField = 'seed';
...

在您的模板中：

<p-table [value]="teams" sortField="teamsSortField" sortOrder="1">

【讨论】：

如果您建议在种子字段周围添加单引号，那么它没有任何区别

【参考方案2】：

我想通了。当我将 team 初始化为一个空白数组时，我认为它正在对其进行排序，然后当我将元素推入数组时它没有使用。所以，这就是我修复它的方法：

ngOnInit() 
  this.title = "C League Standings";
  this.data.getTeams().subscribe(
    res => 
      let tmpTeams = [];
      for(let i=0; i< res.length; i++)
        let tmp = res[i];
        tmpTeams.push(
          new Team(tmp.seed, tmp.id, tmp.team, tmp.opponent,
          tmp.scores, tmp.against, tmp.record, tmp.streak, tmp.players)
        )
      
      this.teams = tmpTeams == null ? [] : tmpTeams;
    
  );