Angular mat-table does not Sort newly added Columns (matSort)

Question

Im trying to sort columns in a mat-table.

The problem I have right now is that I am able to sort by the first column (initially defined in the displayedColumns array). After adding new Columns I can click the header, the sort arrow shows up but the data won't be sorted (first column still works)

html file :

<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8" >


  <ng-container matColumnDef="DisplayName">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> DisplayName</th>
    <td mat-cell *matCellDef="let element"> {{element.DisplayName}} </td>
  </ng-container>

  <div *ngFor="let columnName of this.keytechService.DisplayArray">
    <ng-container matColumnDef={{columnName.name}}>
      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{columnName.DisplayName}} </th>
      <td mat-cell *matCellDef="let element2"> {{this.getValueByKey(element2,columnName.name)}} </td>
    </ng-container>
  </div>

  <ng-container matColumnDef="Delete">
    <th mat-header-cell *matHeaderCellDef></th>
    <<td mat-cell *matCellDef="let row">
      <button mat-button (click)="getRecord(row)">Delete</button>
      </td>
  </ng-container>

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

</table>

question from:https://stackoverflow.com/questions/66048072/angular-mat-table-does-not-sort-newly-added-columns-matsort

Answer 1

Waitting for answers