Блог

Данные team хранятся в формате 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>
  

startup.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)
          )      
        }
      }
    );
  }
}
  

пример объекта team из 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;
    }
  

Я ожидаю, что команды будут отсортированы по командам при загрузке веб-сайта, но это не так

Я думаю, что ваша проблема заключается в указании значения 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">
  

Я понял это. Когда я инициализировал 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;
    }
  );
}