There seems to be a strange issue with the sorting arrows on the table surface. Even though the sorting functionality should be working, it's not sorting the table as expected...
Here is the HTML :
<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort>
<!-- name -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ model.fields.name.label }}</th>
<td mat-cell *matCellDef="let element"> {{ element.name }} </td>
</ng-container>
<!-- ... -->
</table>
</div>
In my component.ts:
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
export class DevizaListComponent implements OnInit {
dataSource = new MatTableDataSource<DevizaInterface>(devizas);
devizas: DevizaInterface[] = [
{
name: 'dollar',
code: 'USD' ,
},
//...
//...
];
//...
@ViewChild(MatSort, { static: true }) sort: MatSort;
//...
constructor() { }
ngOnInit() {
this.dataSource.sort = this.sort;
}
}
I imported in my app.module.ts this:
import { MatTableModule } from '@angular/material/table';
import { MatSortModule } from '@angular/material/sort';
@NgModule({
imports: [
MatTableModule,
MatSortModule,
],
})
Despite no error messages displayed in the console, I'm still facing the issue where the sorting arrows appear but the table doesn't sort correctly. What could be causing this problem?