Angular + Material - Cómo Actualizar Una Fuente De Datos (mat-table)

No se si el ChangeDetectorRef fue requerido cuando la pregunta fue creada, pero ahora esto es suficiente:

import { MatTableDataSource } from '@angular/material/table';

// ...

dataSource = new MatTableDataSource<MyDataType>();

refresh() {
  this.myService.doSomething().subscribe(data: MyDataType[] => {
    this.dataSource.data = data;
  }
}

Ya que está utilizando MatPaginator, solo necesita hacer cualquier cambio en paginator, esto desencadena la recarga de datos.

Truco simple:

this.paginator._changePageSize(this.paginator.pageSize); 

Esto actualiza el tamaño de página al tamaño de página actual, por lo que básicamente nada cambia, excepto que también se llama a la función privada _emitPageEvent(), activando la recarga de tabla.

La mejor manera de hacerlo es agregando un observable adicional a su implementación de fuente de datos.

En el método connect ya debería estar usando Observable.merge para suscribirse a una matriz de observables que incluyen el paginador.page, sort.sortChange, etc. Puede agregar un nuevo sujeto a esto y llamar a next cuando necesite causar una actualización.

Algo como esto:

export class LanguageDataSource extends DataSource<any> {

    recordChange$ = new Subject();

    constructor(private languages) {
      super();
    }

    connect(): Observable<any> {

      const changes = [
        this.recordChange$
      ];

      return Observable.merge(...changes)
        .switchMap(() => return Observable.of(this.languages));
    }

    disconnect() {
      // No-op
    }
}

Y luego puedes llamar a recordChange$.next() para iniciar una actualización.

Naturalmente me gustaría envolver la llamada en un método refresh () y lo llama fuera de la instancia de datasource w/en el componente, y otras técnicas adecuadas.

Esto.DataSource = new MatTableDataSource (this.elementos);

Agregue esta línea debajo de su acción de agregar o eliminar la fila en particular.

refresh() {
  this.authService.getAuthenticatedUser().subscribe((res) => {
    this.user = new MatTableDataSource<Element>(res);   
  });
}

import { Subject } from 'rxjs/Subject';
import { Observable } from 'rxjs/Observable';

export class LanguageComponent implemnts OnInit {
  displayedColumns = ['name', 'native', 'code', 'leavel'];
  user: any;
  private update = new Subject<void>();
  update$ = this.update.asObservable();

  constructor(private authService: AuthService, private dialog: MatDialog) {}

   ngOnInit() {
     this.update$.subscribe(() => { this.refresh()});
   }

   setUpdate() {
     this.update.next();
   }

   add() {
     this.dialog.open(LanguageAddComponent, {
     data: { user: this.user },
   }).afterClosed().subscribe(result => {
     this.setUpdate();
   });
 }

 refresh() {
   this.authService.getAuthenticatedUser().subscribe((res) => {
     this.user = res;
     this.teachDS = new LanguageDataSource(this.user.profile.languages.teach);   
    });
  }
}