如何刷新一个数据源(mat-table)

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

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

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
  }

}

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

当前回答

所以对我来说，没有人能给出和@Kay一样好的答案。对我来说，这是关于排序，排序表不发生变化垫。我的目的是这个答案，因为这是我通过搜索谷歌找到的唯一主题。我使用的是Angular 6。

正如这里所说:

由于表对性能进行了优化，因此它不会自动检查数据数组的更改。相反，当在数据数组上添加、删除或移动对象时，您可以通过调用其renderRows()方法来触发对表所呈现行的更新。

所以你只需要在你的refresh()方法中调用renderRows()来显示你的更改。

请参见这里的积分。

2018-10-25 16:13:35

其他回答

我不知道在创建问题时是否需要ChangeDetectorRef，但现在这就足够了:

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

// ...

dataSource = new MatTableDataSource<MyDataType>();

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

例子: StackBlitz

2018-03-11 20:29:28

// this is the dataSource    
this.guests = [];

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

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

2019-06-05 12:54:57

好吧，我遇到了一个类似的问题，我向数据源添加了一些东西，但它没有重新加载。

我发现最简单的方法就是重新分配数据

let dataSource = ['a','b','c']
dataSource.push('d')
let cloned = dataSource.slice()
// OR IN ES6 // let cloned = [...dataSource]
dataSource = cloned

2019-07-28 08:42:04

使用"concat"可以很容易地更新表中的数据:

例如:

language.component.ts

teachDS: any[] = [];

language.component.html

<table mat-table [dataSource]="teachDS" class="list">

并且，当你更新数据(language.component.ts)时:

addItem() {
    // newItem is the object added to the list using a form or other way
    this.teachDS = this.teachDS.concat([newItem]);
 }

当你使用"concat"时，angular检测对象(this.teachDS)的变化，你不需要使用其他东西。

PD:这是我在angular 6和7的工作，我没有尝试其他版本。

2019-03-14 23:56:02

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

2019-05-23 01:05:43

如何刷新一个数据源(mat-table)

推荐文章

最新文章

标签