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

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

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
  }

}

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


当前回答

似乎您的refresh()函数正在适当地向teachDS数据源添加一个新实例。但是,表没有被更新,因为它没有被指示这样做。

你可以指示Angular使用ChangeDetectorRef服务监控数据源的变化,并在必要时更新表。

ChangeDetectorRef服务必须首先注入到你的组件中:

import { ChangeDetectorRef } from '@angular/core';

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

然后,在refresh()函数中刷新数据源后,你可以指示Angular检查更改并通过changeDetectorRef上的detectChanges()方法更新表:

refresh() {
  this.authService.getAuthenticatedUser().subscribe((res) => {
    this.user = res;
    this.teachDS = new LanguageDataSource(this.user.profile.languages.teach);
    this.changeDetectorRef.detectChanges();  // <-- Tell Angular to check for changes
  });
}

因此,应该更新表以反映数据源的更改。

其他回答

有两种方法可以做到这一点,因为Angular Material是不一致的,而且这一点的文档非常少。当新行到达时,Angular的材质表不会更新。令人惊讶的是,它被告知是因为性能问题。但这看起来更像是一个设计问题,他们无法改变。当出现新行时,表应该进行更新。如果默认情况下不应该启用这种行为,应该有一个开关来关闭它。

不管怎样,我们不能改变Angular Material。但我们基本上可以用一种记录很差的方法来做到这一点:

一,如果你直接使用数组作为源:

call table.renderRows()

mat-table的ViewChild在哪里

第二-如果你使用排序和其他功能

table.renderRows()令人惊讶地不会工作。因为这里的垫子和桌子不一致。你需要使用黑客来告诉源代码改变了。你可以用这个方法:

this.dataSource.data = yourDataSource;

其中dataSource是用于排序和其他功能的MatTableDataSource包装器。

我利用两种资源获得了一个很好的解决方案:

刷新dataSource和paginator:

this.dataSource.data = this.users;
this.dataSource.connect().next(this.users);
this.paginator._changePageSize(this.paginator.pageSize);

例如,dataSource定义在这里:

    users: User[];
    ...
    dataSource = new MatTableDataSource(this.users);
    ...
    this.dataSource.paginator = this.paginator;
    ...

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

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

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

你也可以使用renderRows()方法。

@ViewChild(MatTable, {static: false}) MatTable //初始化

然后 this.table.renderRows ();

作为参考,看看这个: https://www.freakyjolly.com/angular-7-8-edit-add-delete-rows-in-material-table-with-using-dialogs-inline-row-operation/

做到这一点的最佳方法是向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/中调用,以及其他适当的技术。