我正在使用一个垫子表列出用户选择的语言的内容。他们还可以使用对话框面板添加新的语言。在他们添加了一门语言并返回之后。我希望刷新数据源以显示他们所做的更改。

我通过从服务获取用户数据并在刷新方法中将其传递到数据源来初始化数据存储。

Language.component.ts

import { Component, OnInit } 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) { }

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

language-data-source.ts

import {MatPaginator, MatSort} from '@angular/material';
import {DataSource} from '@angular/cdk/collections';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/merge';
import 'rxjs/add/operator/map';

export class LanguageDataSource extends DataSource<any> {

  constructor(private languages) {
    super();
  }

  connect(): Observable<any> {
    return Observable.of(this.languages);
  }

  disconnect() {
    // No-op
  }

}

因此,我尝试调用一个刷新方法,我从后端再次获得用户,然后重新初始化数据源。然而,这并没有起作用,没有发生任何变化。


当前回答

在添加一个新的数据行之后,我通过更新dataSource而不使用它的实例刷新了材料表。

HTML格式的表格:

<table mat-table #table [dataSource]="myDataArray">

component.ts中的addUser():

public USER_DATA: user[] = [];


public newUser = {userName: "ABC", email: "abc@gmail.com"};
public myDataArray: any;


addUser() {
    const newUsersArray = this.USER_DATA;
    newUsersArray.push(this.newUser);
    this.myDataArray = [...newUsersArray];//refresh the dataSource
    
  }

其他回答

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

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

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()来处理过滤逻辑。

这招对我很管用:

refreshTableSorce() {
    this.dataSource = new MatTableDataSource<Element>(this.newSource);
}

在阅读材料表未更新后,数据更新#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
];

试试这个也许能帮到你

从加载用户的函数开始。

loadUser() {
    this.userService.getListOfUsers().subscribe()
        (response: any) => {
            this.dataSource = response
            this.dataSource.paginator = this.paginator;
        }

}

定义刷新函数,用于删除用户后刷新表。

refresh() {
    this.loadUser();
    this.dataSource.data = [...this.dataSource.data];
    this.dataSource.paginator = this.paginator;
}

现在,您可以在删除用户进程后调用refresh()函数,如下所示。

deleteUser() {
    ...... 
    this.refresh()
}
// this is the dataSource    
this.guests = [];

this.guests.push({id: 1, name: 'Ricardo'});

// refresh the dataSource
this.guests = Array.from(this.guest);