CODEWITHSUNDEEP
angulartypescriptsortingangular-materialmat-table
user11295075
user11295075

Reputation:

Problem sorting with matSort with API data

My mat-table is working fine, but when adding mat-sort following the official api documentation, it fails at the ngAfterViewInit with the following message

ERROR TypeError: Cannot set property 'sort' of undefined

First error screenshot .. Not sorting

The Data are displayed correctly from the api, I moved the code to the constructor of the component to only set this in the onInit : this.listData.sort = this.sort;

I imported the module in the app.module.

So Here is my 3 files :

Componenet.html

  <mat-table [dataSource]="listData" matSort>
    <ng-container matColumnDef="gender">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Gender</mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.gender}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="firstname">
      <mat-header-cell *matHeaderCellDef mat-sort-header>First Name</mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.firstname}}</mat-cell>
    </ng-container>

component.ts 

import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';
import {PersonneService} from '../../shared/personne.service';
import { MatTableDataSource, MatSort} from '@angular/material';
import {Personne} from '../../personne';

@Component({
  selector: 'app-personne-list',
  templateUrl: './personne-list.component.html',
  styleUrls: ['./personne-list.component.css']
})
export class PersonneListComponent implements AfterViewInit {

  personne: any = [];
  constructor(private service: PersonneService) {
    this.service.getPersonnes().subscribe((data: {}) => {
      this.personne = data;
      this.listData = new MatTableDataSource(this.personne);
    });
  }

  listData: MatTableDataSource<Personne>;
  displayedColumns: string[] = ['gender', 'firstname', 'lastname', 'address', 'city', 'state', 'ordertotal', 'actions'];

  @ViewChild(MatSort) sort: MatSort;
  ngAfterViewInit() {
    console.log({SORT: this.sort});
    this.listData.sort = this.sort;
  }

}

Service.ts : 

import { Injectable } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
import {Personne} from '../personne';
import {Observable} from 'rxjs';
import {map} from 'rxjs/operators';


@Injectable({
  providedIn: 'root'
})
export class PersonneService {

  constructor(private http: HttpClient) { }
  form: FormGroup = new FormGroup({
    firstname: new FormControl('', Validators.required),
    lastname: new FormControl('', Validators.required),
    address: new FormControl('', [Validators.minLength(8), Validators.required]),
    city: new FormControl(''),
    state: new FormControl(''),
    gender: new FormControl('1'),
    ordertotal: new FormControl('')
  });

  endpointGet = 'http://localhost:3000/api/personnes';
  endpointPost = 'http://localhost:3000/api/personne/';

  getPersonnes() {
    return this.http.get(this.endpointGet);
  }

While I'm writing this question, I found this answer : https://stackoverflow.com/a/53112864/11295075

And I added this to the html : [hidden]="!listData.data" matSort

It became : <mat-table [dataSource]="listData" [hidden]="!listData.data" matSort>

Now when I click it sorts but not correctly and here is the error in the console : ERROR TypeError: Cannot read property 'data' of undefined

Second error

Thank you for your help.

Upvotes: 0

Views: 3513

Answers (2)

Sunday Oluwapelumi
Sunday Oluwapelumi

Reputation: 1

I also faced this problem, but none of the examples I found worked, so what I did was use a setTimeout to delay setting the paginator and sort like this:

this.employeeService.getAllEmployees().subscribe((employees: Employee[]) => {
  this.datasource = new MatTableDataSource<Employee>(employees)
  setTimeout(() => {
    this.datasource.paginator = this.paginator;
    this.datasource.sort = this.sort
  })
  this._isLoading.next(false)
})

May not be the best solution, but it solved my problem!

Upvotes: 0

mbojko
mbojko

Reputation: 14679

Move this line

    this.listData.sort = this.sort;

from ngAfterViewInit to when you actually have listData. That is, after the return and processing of getPersonnes(). That is, here:

    this.service.getPersonnes().subscribe((data: {}) => {
      this.personne = data;
      this.listData = new MatTableDataSource(this.personne);
      this.listData.sort = this.sort;
    });

Regarding the ERROR TypeError: Cannot read property 'data' of undefined, easy fixed with the safe navigation operator.

In <mat-table [dataSource]="listData" [hidden]="!listData.data" matSort>, change it to [hidden]="!listData?.data". This way it'll only try to access listData.data when listData is defined.

Upvotes: 1

Related Questions