Angular matSort no ordena

Solución:

Si usa “* ngIf” para ocultar inicialmente el contenedor de la tabla en su plantilla, el campo de visualización no estará definido.

Acabo de tener este problema y todo lo que tenía que hacer era asegurarme de que está haciendo referencia a su matSort viewChild correctamente y asegúrese de haber agregado el MatSortModule en su archivo module.ts en el área de importaciones.

Como el siguiente:

@NgModule({
  imports: [
    MatSortModule,
    MatTableModule,
  ]
)}

Encontré una solución para este problema.

El principal problema fue que la tabla se renderizó antes de que llegaran los datos. Primero cargué los datos y los envié como fuente al constructor de la fuente de datos. Después de eso, el problema desapareció. Eso es lo que pasa con http.get async y services.

Gracias por tu ayuda.

fetchData(id){
  this.fetch.getProcesses(id).subscribe(result => {
    this.processes = result;
    this.dataSource = new TableDataSource(this.processes);
    Observable.fromEvent(this.filter.nativeElement, 'keyup')
      .debounceTime(150)
      .distinctUntilChanged()
      .subscribe(() => {
        if (!this.dataSource) {
          return;
        }
        this.dataSource.filter = this.filter.nativeElement.value;
      });
  });
}




export class TableDataSource extends DataSource<Proces>{
  _filterChange = new BehaviorSubject('');
  get filter(): string {
    return this._filterChange.value;
  }
  set filter(filter: string) {
    this._filterChange.next(filter);
  }
  filteredData: any =[];

  constructor(private processes:Proces[]){
    super();
  }
  connect(): Observable<Proces[]>{
    const displayDataChanges = [
      this.processes,
      this._filterChange,
    ];
    return Observable.merge(...displayDataChanges).map(() => {
      this.filteredData = this.processes.slice().filter((item: Proces) => {
        const searchStr = (item.name).toLowerCase();
        return searchStr.indexOf(this.filter.toLowerCase()) !== -1;

      });
      return this.filteredData;
    })
  }
  disconnect(){}
}



      <div>
    <mat-form-field floatPlaceholder="never">
      <input matInput #filter placeholder="Pretraži procese">
    </mat-form-field>
  </div>
  <mat-table #table [dataSource]="dataSource" matSort>

    <ng-container matColumnDef="col1">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Name</mat-header-cell>
      <mat-cell *matCellDef="let row" > {{row.nazivProcesa}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="col2">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Cell 2</mat-header-cell>
      <mat-cell *matCellDef="let row" > {{row.nazivVlasnika
        }} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="col3">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Cell 3</mat-header-cell>
      <mat-cell *matCellDef="let row" > {{row.interniAkt}} </mat-cell>
    </ng-container>

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

---

---

Utiliza Nuestro Buscador