Сортировка неработающей таблицы углового дизайна материалов

Используя таблицу Angular Material Design, я просто пытаюсь отсортировать заголовки двух столбцов в таблице данных. (В приведенном ниже коде это столбцы «Имя сотрудника» и «Должность».) Оба они не сортируются. Не знаю почему. Вот мой код и спасибо, CM

employee-table.component.html

<div>

  <mat-table [dataSource] = "dataSource" matSort>
    <ng-container matColumnDef="photo">
      <mat-header-cell *matHeaderCellDef>Profile</mat-header-cell>
      <mat-cell *matCellDef="let employee"><img width = "100" height = "100" src = "../assets/images/{{employee.username}}.jpg" >
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Employee Name</mat-header-cell>
      <mat-cell *matCellDef="let employee">{{employee.name}}</mat-cell>
    </ng-container>


    <ng-container matColumnDef="position">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Job Title</mat-header-cell>
      <mat-cell *matCellDef="let employee">{{employee.position}}</mat-cell>
    </ng-container>

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

  </mat-table>
</div>

employee-table.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import {Observable} from 'rxjs/Observable';
import {MatSort, MatSortable, MatTableDataSource} from '@angular/material';
import {EmployeeService} from '../employee.service';

@Component({
  selector: 'app-employee-table',
  templateUrl: './employee-table.component.html',
  styleUrls: ['./employee-table.component.css']
})
export class EmployeeTableComponent implements OnInit {
  @ViewChild(MatSort) sort: MatSort;
  dataSource;
  displayedColumns = ['photo', 'name', 'position'];

  constructor() { }
  ngOnInit() {   
    this.dataSource =[
            {
              "id": 1,
              "name": "Leanne Grahamz",
              "username": "Bret",
              "position": "Software Developer"
            },
            {
              "id": 2,
              "name": "Ervin Howell",
              "username": "Antonette",
              "position": "Graphic Designer"
            },
            {
              "id": 3,
              "name": "Clementine Bauch",
              "username": "Samantha",
              "position": "Front End Developer"
            },
            {
              "id": 4,
              "name": "Patricia Lebsack",
              "username": "Karianne",
              "position": "Full Stack Developer"
            },
            {
              "id": 5,
              "name": "Chelsey Dietrich",
              "username": "Kamren",
              "position": "Database Administrator" 
            }
    ]; //End data object

    this.dataSource.sort = this.sort;

  }//End ng onInit

}//End class EmployeeTableComponent

angular angular-material-5
person Community    schedule 27.04.2018    source источник
comment
Что еще вы хотели бы увидеть в Партх Годхани? Я с радостью отредактирую свой пост.   -  person    schedule 27.04.2018

Ответы (2)


arrow_upward
1
arrow_downward

Вы устанавливаете сортировку источника данных this.dataSource.sort = this.sort; слишком рано в жизненном цикле. Как указано в примерах material.angular.io, вы должны установить сортировку источника данных после вид инициализации:

Скопировано из примера material.angular.io:

 /**
   * Set the sort after the view init since this component will
   * be able to query its view for the initialized sort.
   */
  ngAfterViewInit() {
    this.dataSource.sort = this.sort;
  }

Вам также следует отредактировать инициализацию источника данных:

ngOnInit() {
 this.dataSource = new MatTableDataSource([{
     "id": 1,
     "name": "Leanne Grahamz",
     "username": "Bret",
     "position": "Software Developer"
    }, 
    ...
    {
     "id": 5,
     "name": "Chelsey Dietrich",
     "username": "Kamren",
     "position": "Database Administrator"
    }
   ]);
}

Вот отредактированный исходный пример с вашим кодом.

person ibenjelloun    schedule 27.04.2018
comment
Спасибо ibenjelloun за ответ. Я подумал, что это может иметь какое-то отношение к той строке, которая сортирует источник данных. Так следует ли мне удалить эту строку из ngOnInit и разместить вызов ngAfterView с этой строкой сразу после ngOnInit? - person ; 27.04.2018
comment
Сортировка - единственная строка, которая должна быть в ngAfterViewInit, поскольку вы вызываете this.sort, который инициализируется шаблоном. Раньше я этого не видел, но вам также нужно указать источник данных как MatTableDataSource. То, что вы называете источником данных в своем коде, на самом деле является ELEMENT_DATA в примере материала angular. - person ibenjelloun; 27.04.2018
comment
Если у вас есть время, не могли бы вы отредактировать свой ответ, чтобы показать мне, о чем вы говорите, как выглядит в коде? - person ; 27.04.2018
comment
Большое спасибо за то, что нашли время показать мне, как это сделать. Моя таблица сейчас сортируется. И я понимаю внесенные вами изменения. Так благодарен за этот форум и за все, что нашли время поделиться своим опытом, чтобы в мире были и другие эксперты ... - person ; 27.04.2018

arrow_upward
1
arrow_downward

В качестве альтернативы вы также можете использовать тайм-аут для сортировки (и при необходимости нумерации страниц), например:

setTimeout(() => {
  this.tableDataSource.sort = this.sort;
  this.tableDataSource.paginator = this.paginator;
}, 0);
person user2968675    schedule 10.09.2018
comment
Я не думаю, что установка тайм-аута без всякой оценки времени здесь поможет. - person speksy; 29.10.2019
comment
Вы правы, я забыл установить значение (сейчас редактируется). 0 достаточно, так как мы просто хотим переместить его в конец очереди событий. - person user2968675; 30.10.2019