Angular 6 - Sorting all table columns works on onl

Question

I'm trying to sort a MatTable with MatSort of angular material but the problem is I can sort only two columns of my MatTable but what I want is to sorting all my columns and I don't understand why it doesn't work... I can click on the arrow like when I want to sort data of my table but nothing happens except with column multiple and occupation which are sorting well.

Here is my code (I'm well importing MatSortModule into my app.module.ts):

csr.component.ts

import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';
import {PosteCSRPoste, PosteCSRService} from '../../api';
import {MatSort, MatTableDataSource} from '@angular/material';

@Component({
  selector: 'app-csr',
  templateUrl: './csr.component.html',
  styleUrls: [
    './csr.component.css',
    '../app.component.css'
  ]
})
export class CsrComponent implements OnInit, AfterViewInit {
  displayedColumns = [
    'disciplineCsd',
    'disciplineCsr',
    'multiple',
    'communeIdentique',
    'etablissementCsd',
    'etablissementCsr',
    'occupation'
  ];

  postes = new MatTableDataSource<PosteCSRPoste>();

  @ViewChild(MatSort) sort: MatSort;

  constructor(private posteCSRService: PosteCSRService) {
  }

  ngOnInit(): void {
    this.getPostesCSR();
  }

  ngAfterViewInit(): void {
    this.postes.sort = this.sort;

  }

  getPostesCSR(): void {
    this.posteCSRService.getPosteCSRCollection().subscribe(data => {
      this.postes.data = data['hydra:member'];
    });
  }
}

csr.component.html

<table mat-table [dataSource]="postes" matSort class="table table-hover table-bordered mat-elevation-z8">
  <ng-container matColumnDef="disciplineCsd">
    <th mat-header-cell *matHeaderCellDef mat-sort-header scope="col">Discipline CSD</th>
    <td mat-cell *matCellDef="let poste">{{ poste.disciplineCsd.nom | capitalize }}</td>
  </ng-container>

  <ng-container matColumnDef="disciplineCsr">
    <th mat-header-cell *matHeaderCellDef mat-sort-header scope="col">Discipline CSR</th>
    <td mat-cell *matCellDef="let poste">{{ poste.disciplineCsr.nom | capitalize }}</td>
  </ng-container>

  <ng-container matColumnDef="multiple">
    <th mat-header-cell *matHeaderCellDef mat-sort-header scope="col">Multiple</th>
    <td mat-cell *matCellDef="let poste">
      <ng-container *ngIf="poste.multiple; else nonMultiple">
        Multiple
      </ng-container>

      <ng-template #nonMultiple>
        Non multiple
      </ng-template>
    </td>
  </ng-container>

  <ng-container matColumnDef="communeIdentique">
    <th mat-header-cell *matHeaderCellDef mat-sort-header scope="col">Même commune</th>
    <td mat-cell *matCellDef="let poste">
      <ng-container *ngIf="poste.communesIdentiques; else communesDifferentes">
        Mêmes communes
      </ng-container>

      <ng-template #communesDifferentes>
        Communes différentes
      </ng-template>
    </td>
  </ng-container>

  <ng-container matColumnDef="etablissementCsd">
    <th mat-header-cell *matHeaderCellDef mat-sort-header scope="col">Établissement CSD</th>
    <td mat-cell *matCellDef="let poste">{{ poste.etablissementCsd.nom }}</td>
  </ng-container>

  <ng-container matColumnDef="etablissementCsr">
    <th mat-header-cell *matHeaderCellDef mat-sort-header scope="col">Établissement CSR</th>
    <td mat-cell *matCellDef="let poste">{{ poste.etablissementCsr.nom }}</td>
  </ng-container>

  <ng-container matColumnDef="occupation">
    <th mat-header-cell *matHeaderCellDef mat-sort-header scope="col">Occupation</th>
    <td mat-cell *matCellDef="let poste">
      <ng-container *ngIf="poste.occupation; else vacant">
        Occupé
      </ng-container>

      <ng-template #vacant>
        Vacant
      </ng-template>
    </td>
  </ng-container>

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

Please tell me what I'm doing wrong.

Answer 1

This answer solve my problem.

The matColumnDef property must have the same name as your model