En una pregunta relacionada, me dijeron que si quería ordenar una tabla de material angular que se completó a partir de una solicitud http.get() , tendría que establecer la ordenación después de que se devolviera la respuesta (por ejemplo, en subscribe() ). Esto tiene sentido para mí.
Sin embargo, después de jugar un poco con él, traté de modificar mi Stackblitz original para establecer la clasificación de la tabla de material angular que se llenó desde json estático en línea de la misma manera, en subscribe() . Esto rompió el tipo de esta mesa.
Stackblitz: https://stackblitz.com/edit/angular-ivy-pvmzbs
Antes:
ngOnInit(): void { if (this.name === 'Inline') { this.api.getDataInline().subscribe((response) => { this.dataSource = new MatTableDataSource(response); }); } else if (this.name === 'Http') { this.api.getDataHttp().subscribe((response) => { this.dataSource = new MatTableDataSource(response); this.dataSource.sort = this.sort; }); } } ngAfterViewInit() { this.dataSource.sort = this.sort; }Después:
ngOnInit(): void { if (this.name === 'Inline') { this.api.getDataInline().subscribe((response) => { this.dataSource = new MatTableDataSource(response); this.dataSource.sort = this.sort; }); } else if (this.name === 'Http') { this.api.getDataHttp().subscribe((response) => { this.dataSource = new MatTableDataSource(response); this.dataSource.sort = this.sort; }); } } ngAfterViewInit() {}¿Por qué esto rompe la ordenación de la tabla en línea?
Reemplace ngOnInit con ngAfterViewInit . En la sort de llamadas OnInit aún no se inicializó, en AfterViewInit está seguro de que los elementos de la plantilla también se inicializaron. Y la tabla Http estaba funcionando porque matSort aún no se había inicializado durante la primera suscripción, pero en la segunda probablemente ya lo estaba.
Como se mencionó en otra respuesta, los datos estáticos llegan antes de que se haya representado la vista, por lo que no están definidos. Puede proporcionar { static: true } en ViewChild . Debe configurar eso para poder ejecutar su código en OnInit .
@ViewChild(MatSort, { static: true }) sort!: MatSort;Tu STACKBLITZ bifurcado