角材料表排序在 Post 中不起作用

Question

Im not sure what my issue is here i see the arrow and i can log the sorting to the console and see that its seeing the field it should be sorting but when i click the table arrow to sort by username it doesnt sort it my code will be below any help pointing out what I may be doing wrong would be a huge help thanks everyone.

player-list.component.html

<mat-form-field>
  <input
    matInput
    (keyup)="applyFilter($event.target.value)"
    placeholder="Filter"
  />
</mat-form-field>

<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
  <!-- Position Column -->
  <ng-container matColumnDef="Username">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>username</th>
    <td mat-cell *matCellDef="let user">{{ user.UserName }}</td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="Region">
    <th mat-header-cell *matHeaderCellDef>Region</th>
    <td mat-cell *matCellDef="let user">{{ user.Region }}</td>
  </ng-container>

  <ng-container matColumnDef="Earnings">
    <th mat-header-cell *matHeaderCellDef>Earnings</th>
    <td mat-cell *matCellDef="let user">{{ user.Earnings }}</td>
  </ng-container>

  <!-- Weight Column -->
  <ng-container matColumnDef="Wins">
    <th mat-header-cell *matHeaderCellDef>Wins</th>
    <td mat-cell *matCellDef="let user">{{ user.Wins }}</td>
  </ng-container>

  <!-- Symbol Column -->
  <ng-container matColumnDef="Loses">
    <th mat-header-cell *matHeaderCellDef>Loses</th>
    <td mat-cell *matCellDef="let user">{{ user.Loses }}</td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>

player-list.component.ts

import { UserService } from "./../../../services/API/userAPI";
import { User } from "./../../../services/API/user.model";
import { Component, OnInit, ViewChild } from "@angular/core";
import { MatPaginator, MatSort, Sort } from "@angular/material";
import { MatTableDataSource } from "@angular/material/table";

@Component({
  selector: "app-player-list",
  styleUrls: ["player-list.component.css"],
  templateUrl: "player-list.component.html"
})
export class PlayerListComponent implements OnInit {
  public userArray: User[];
  dataSource: MatTableDataSource<any>;
  displayedColumns: string[] = [
    "Username",
    "Region",
    "Earnings",
    "Wins",
    "Loses"
  ];
  constructor(public userService: UserService) {}

  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
  @ViewChild(MatSort, { static: true }) sort: MatSort;

  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }

  ngOnInit() {
    this.userService.getAllUsers().subscribe(res => {
      this.dataSource = new MatTableDataSource(res);
      this.dataSource.sort = this.sort;
      this.dataSource.paginator = this.paginator;
      console.log(this.dataSource.sort);
    });
  }
}

Answer 1

Fix my issues if you look at this code here

  <ng-container matColumnDef="Username">
    <th mat-header-cell *matHeaderCellDef  mat-sort-header="UserName">Username</th>
    <td mat-cell *matCellDef="let user">{{ user.UserName }}</td>
  </ng-container>

you will see mat-sort-header="UserName" i had that set to Username before not realizing that it needed to match the user.UserName