Angular 6 - Sorting all table columns works on only two columns instead of all

问题

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.