角材料表排序在帖子中不起作用代码答案

【问题标题】：Angular Material Table Sorting Not Working Code In Post角材料表排序在帖子中不起作用代码
【发布时间】：2020-05-05 12:37:55
【问题描述】：

我不确定我的问题是什么，我看到了箭头，我可以将排序记录到控制台并看到它看到应该排序的字段但是当我单击表格箭头按用户名排序时它没有排序我的代码将在任何帮助下方指出我可能做错了什么，这将是一个巨大的帮助，谢谢大家。

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

【问题讨论】：

你能为此添加一个有效的堆栈闪电战吗？这样更容易提供帮助
stackblitz.com/edit/angular-edw8d5
看来this.sort 是未定义的。对这些解决方案有帮助吗，stackoverflow.com/questions/46786757/…，stackoverflow.com/questions/49311585/…。
不，我已经尝试过这两种解决方案 jacob mcgowan
如果我将它移动到 ngafterviewinit 是正确的，它是未定义的，但在 oninit 中它不会出错

标签： node.js angular mean-stack

【解决方案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 之前将其设置为用户名

【讨论】：