PrimeNg表没有以角度排序类的数组

Question

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

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

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>

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

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

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