Question

我可能是愚蠢的，但据我所知，下面的代码应完全遵循来自角材料网站的示例。但是，排序结果不正确。

我可以看到排序发生了，因为顺序改变了。 xxx50行成为第一行。 xxx01行移至xxx50的原始位置。其余数据按原始顺序排列。 asc和des的顺序相同。

请告诉我我做错了什么。

html：

<div class="mat-elevation-z8">
    <table mat-table [dataSource]="dataSource" matSort>
        <ng-container matColumnDef="agent">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Agent</th>
            <td mat-cell *matCellDef="let relationshipInterface"> {{relationshipInterface.agentDisplayName}} </td>
        </ng-container>
        <ng-container matColumnDef="player">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Player</th>
            <td mat-cell *matCellDef="let relationshipInterface"> {{relationshipInterface.playerDisplayName}} </td>
        </ng-container>
        <ng-container matColumnDef="avatar">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Nickname</th>
            <td mat-cell *matCellDef="let relationshipInterface"> {{relationshipInterface.avatarDisplayName}} </td>
        </ng-container>

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

    <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>

ts：

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';

export interface RelationshipInterface {
  agentName: string;
  agentDisplayName: string;
  playerName: string;
  playerDisplayName: string;
  avatarName: string;
  avatarDisplayName: string;
}

@Component({
  selector: 'app-relationships-table',
  templateUrl: './relationships-table.component.html',
  styleUrls: ['./relationships-table.component.css']
})
export class RelationshipsTableComponent implements OnInit {
  displayedColumns: string[] = ['agent', 'player', 'avatar'];
  dataSource: MatTableDataSource<RelationshipInterface>;

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  constructor() {

  }

  ngOnInit() {
    this.dataSource = new MatTableDataSource(
      this.getTempData()
    );
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

  applyFilter(filterColumn: string, filterValue: any) {
  }

  getTempData() {
    const newData = [];
    for (let i = 0; i < 100; i++) {
      let str: string;
      if (i < 10) {
        str = '0' + i;
      } else {
        str = '' + i;
      }
      const relationshipInterface = {
        agentName: 'agent name ' + str,
        agentDisplayName: 'agent dName ' + str,
        playerName: 'player name ' + str,
        playerDisplayName: 'player dName ' + str,
        avatarName: 'avatar name ' + str,
        avatarDisplayName: 'avatar dName ' + str,
      };
      newData.push(relationshipInterface);
    }
    return newData;
  }
}

Answer 1

显然，经过测试，列名称必须与数据源属性名称匹配。

即

html：

<ng-container matColumnDef="agent">

ts：

export interface RelationshipInterface {
  agent: string; // was agentDisplayName
}

Angular Material Table排序行为导致错误的顺序

1 个答案: