Angular Сортировка таблицы материалов, не рабочий код в почте - PullRequest
Новая
       2

Angular Сортировка таблицы материалов, не рабочий код в почте

0 голосов
/ 19 января 2020

Я не уверен, что моя проблема здесь, я вижу стрелку, и я могу записать сортировку на консоль и увидеть, что она видит поле, которое она должна сортировать, но когда я нажимаю на стрелку таблицы, чтобы отсортировать по имени пользователя, она не сортирует ее мой код будет ниже любой справки, указывая на то, что я могу делать неправильно, было бы огромной помощью, спасибо всем.

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

1 Ответ

0 голосов
/ 19 января 2020

Исправьте мои проблемы, если вы посмотрите на этот код здесь 

  <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

...