PrimeNg表不按角度對類數組進行排序

Question

團隊數據以json格式存儲，並轉換為默認情況下未在ptable中排序的Team類。

我仔細檢查了所有導入並添加了可工作的可排序列，但該表在默認情況下仍不會排序。

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

排行榜

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"]
    }

團隊實體，其中調用的功能只是進行計算

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

我希望在網站加載時按團隊對團隊進行排序，但他們不會

Answer 1

我認為您的問題是在指定sortField值。 您可以通過兩種方式做到這一點：

1. 現在就在模板中。 在這種情況下，請記住要傳遞變量，而不是要排序的字段名稱。 因此，您的代碼應為：

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

2. 您可以在組件中聲明一個變量，然后將其傳遞給p-table組件：

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

在您的模板中：

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

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