Поведение сортировки таблицы угловых материалов приводит к неправильному порядку

Question

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

Я вижу, что сортировка произошла, потому что заказ изменился. строка ххх50 стала первой строкой. строка 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>

ц

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
}