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

Question

我不確定我的問題是什么我看到了箭頭，我可以將排序記錄到控制台並看到它看到它應該排序的字段但是當我單擊表格箭頭按用戶名排序時它不會對它進行排序我的代碼將低於任何指出我可能做錯的幫助將是一個巨大的幫助，謝謝大家。

播放器列表.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>

播放器列表.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

如果您在此處查看此代碼，請修復我的問題

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

你會看到mat-sort-header="UserName"我在沒有意識到它需要匹配user.UserName之前將它設置為 Username