Angular 角度6-对所有表格列进行排序只对两列有效，而不是对所有列有效

我试图用角度材质的

MatSort

对

MatTable

进行排序，但问题是我只能对

MatTable

中的两列进行排序，但我想对所有列进行排序，我不明白为什么它不起作用。。。当我想对表中的数据进行排序时，我可以单击箭头，但除了排序良好的列

multiple

和

occulation

之外，什么都没有发生

这是我的代码（我正在将

MatSortModule

导入我的

app.module.ts

）：

csr.component.ts

从'@angular/core'导入{AfterViewInit，Component，OnInit，ViewChild}；
从“../../api”导入{PosteCSRPoste，PosteCSRService}；
从“@angular/material”导入{MatSort，MatTableDataSource}；
@组成部分({
选择器：“应用程序csr”，
templateUrl:“./csr.component.html”，
样式URL：[
“./csr.component.css”，
“../app.component.css”
]
})
导出类CsrComponent实现OnInit，AfterViewInit{
displayedColumns=[
"纪律教育署",，
"纪律委员会",，
"多",，
"社区",，
"etad",，
“ETAR”，
“职业”
];
postes=新MatTableDataSource（）；
@ViewChild（MatSort）排序：MatSort；
构造函数（专用posteCSRService:posteCSRService）{
}
ngOnInit（）：void{
这个.getPosteSSR（）；
}
ngAfterViewInit（）：void{
this.postes.sort=this.sort；
}
getPostesCSR（）：void{
this.posteCSRService.getPosteCSRCollection（）.subscribe（数据=>{
this.postes.data=数据['hydra:member']；
});
}
}

csr.component.html

纪律惩教署
{{poste.practicecsd.nom|capitalize}
学科社会责任
{{poste.practicecsr.nom |大写}
倍数
倍数
非多重
梅梅公社
Mêmes公社
差别公社
Établisement CSD
{{poste.etablisementcsd.nom}
Établissement CSR
{{poste.etablisementcsr.nom}
职业
占领
空闲的

请告诉我我做错了什么。

这解决了我的问题

matColumnDef

属性必须与模型同名

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'];
    });
  }
}

<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>