我认为MatTableDataSource对象在某种程度上与你传递给MatTableDataSource构造函数的数据数组相关联。

例如:

dataTable: string[];
tableDS: MatTableDataSource<string>;

ngOnInit(){
   // here your pass dataTable to the dataSource
   this.tableDS = new MatTableDataSource(this.dataTable); 
}

所以，当你需要改变数据时;改变原始列表dataTable，然后通过调用tableDS上的_updatechangesub兵役()方法反映表上的变化。

例如:

this.dataTable.push('testing');
this.tableDS._updateChangeSubscription();

这就是我在Angular 6中的工作。

在阅读材料表未更新后，数据更新#11638错误报告 我发现最好的(读，最简单的解决方案)是最后的评论者“shhdharmen”建议使用EventEmitter。

这涉及到对生成的数据源类进行一些简单的更改

例如，在你的数据源类中添加一个新的私有变量

import { EventEmitter } from '@angular/core';
...
private tableDataUpdated = new EventEmitter<any>();

当我将新数据推入内部数组(this.data)时，我会触发一个事件。

public addRow(row:myRowInterface) {
    this.data.push(row);
    this.tableDataUpdated.emit();
}

最后，更改'connect'方法中的'dataMutation'数组，如下所示

const dataMutations = [
    this.tableDataUpdated,
    this.paginator.page,
    this.sort.sortChange
];

在refresh()方法中使用ChangeDetectorRef触发变更检测 在接收到新数据后，在构造函数中注入ChangeDetectorRef，并像这样使用detectChanges:

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { LanguageModel, LANGUAGE_DATA } from '../../../../models/language.model';
import { LanguageAddComponent } from './language-add/language-add.component';
import { AuthService } from '../../../../services/auth.service';
import { LanguageDataSource } from './language-data-source';
import { LevelbarComponent } from '../../../../directives/levelbar/levelbar.component';
import { DataSource } from '@angular/cdk/collections';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import { MatSnackBar, MatDialog } from '@angular/material';

@Component({
  selector: 'app-language',
  templateUrl: './language.component.html',
  styleUrls: ['./language.component.scss']
})
export class LanguageComponent implements OnInit {
  displayedColumns = ['name', 'native', 'code', 'level'];
  teachDS: any;

  user: any;

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

  ngOnInit() {
    this.refresh();
  }

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

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

我已经尝试了之前的一些建议。它确实更新了表格，但我有一些担忧:

更新数据源。数据及其克隆。如。

this.dataSource.data = [...this.dataSource.data];

如果数据很大，这将重新分配大量内存。此外，MatTable认为表内的所有内容都是新的，因此可能会导致性能问题。我发现我的表有大约300行。

调用paginator._changePageSize。如。

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

它将发出页面事件。如果您已经对页面事件进行了一些处理。您可能会觉得很奇怪，因为事件可能会被多次触发。如果事件以某种方式间接触发_changePageSize()，可能会导致无限循环……

我建议另一种解决方案。如果您的表不依赖于dataSource的过滤器字段。

你可以更新过滤字段来触发表刷新:

this.dataSource.filter = ' '; // Note that it is a space, not empty string

通过这样做，表将执行过滤，从而更新表的UI。但是它需要有自己的dataSource.filterPredicate()来处理过滤逻辑。

做到这一点的最佳方法是向Datasource实现中添加一个额外的可观察对象。

在connect方法中，你应该已经使用了Observable。合并以订阅包含分页器的可观察对象数组。页面中,排序。sortChange等等。您可以添加一个新的主题，并在需要引起刷新时调用它。

就像这样:

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
    }
}

然后可以调用recordChange$.next()来启动刷新。

当然，我会将调用包装在refresh()方法中，并将其从组件中的数据源实例w/中调用，以及其他适当的技术。

由于您正在使用MatPaginator，您只需要对分页器做任何更改，这将触发数据重新加载。

简单的技巧:

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

这将页面大小更新为当前页面大小，因此基本上没有任何变化，除了也调用私有_emitPageEvent()函数，从而触发重新加载表。