角＆＃x2B;材料 - 如何刷新数据源（MAT -Table）

Question

我正在使用 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
  }

}

因此，我试图调用一种刷新方法，在该方法中，我再次从后端获得用户，然后我重新开始数据来源。但是，这不起作用，没有发生任何变化。

Answer 1

我不知道在创建问题时是否需要更改eTectorRef ，但是现在这已经足够了：

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

// ...

dataSource = new MatTableDataSource<MyDataType>();

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

示例：
stackblitz

Answer 2

通过使用 consewetectorRef ）方法
收到新数据后，注入 changeTectorRef 在构造函数中并使用检测案例这样：

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

Answer 3

因此，对我而言，没有人能为我遇到的问题提供好的答案，而我遇到的问题几乎是@kay。对我来说，这是关于排序的，排序表不会发生在垫子中。
我目的是这个答案，因为这是我通过搜索Google找到的唯一主题。
我正在使用Angular 6。

如所说在这里：

由于表优化了性能，因此不会自动检查对数据数组的更改。相反，当在数据数组中添加，删除或移动对象时，您可以通过调用其renderrows（）方法来触发表格的渲染行更新。

因此，您只需要在 refresh（）方法中调用 renderrows（）即可出现更改。

请参阅在这里进行集成。

Answer 4

在Angular 9中，秘密是 this.datasource.data = this.datasource.data;

示例：

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

dataSource: MatTableDataSource<MyObject>;

refresh(): void {
    this.applySomeModif();
    // Do what you want with dataSource

    this.dataSource.data = this.dataSource.data;
}

applySomeModif(): void {
    // add some data
    this.dataSource.data.push(new MyObject());
    // delete index number 4
    this.dataSource.data.splice(4, 0);
}

Answer 5

由于您正在使用 matpaginator ，您只需要做任何事情更改为Paginator，此触发数据重新加载。

简单的技巧：

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

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

Answer 6

添加了新的数据行后，我通过更新数据源而无需使用其实例来刷新材料表。

html中的表：

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

component.ts 中的adduser（）：

public USER_DATA: user[] = [];

public newUser = {userName: "ABC", email: "[email protected]"};
public myDataArray: any;


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

Answer 7

使用DataSource Connect函数

this.datasource.connect().next(data);

您可以像这样 。 “数据”是数据表的新值

Answer 8

this.dataSource = new MatTableDataSource<Element>(this.elements);

在您的添加或删除特定行的操作下方添加此行。

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

Answer 9

您还可以使用renderrows（）方法：

@ViewChild(MatTable, {static: false}) table : MatTable<any>  // Initialize

然后

this.table.renderRows();

进行参考，请查看： Angular 10 | 9 | 8编辑/添加/添加/ delete行在材料表中使用对话框内联行动

Answer 10

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

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

let dataSource = ['a','b','c']
dataSource.push('d')
let cloned = dataSource.slice()
// Or in ECMAScript 2015 (ES6): // let cloned = [...dataSource]
dataSource = cloned

Answer 11

做到这一点的最佳方法是在您的数据源实现中添加可观察到的其他可观察到的方法。

在连接方法中，您应该已经使用 observable.merge 订阅包括Paginator.paginator.page，sort.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（）方法包装调用，并将其从组件中的数据源实例和其他适当的技术中调用。

Answer 12

有两种方法可以做到这一点，因为角质材料不一致，并且记录在很差的情况下。当新行到达时，Angular材料表将不会更新。令人惊讶的是，有人告诉这是因为性能问题。但是它看起来更像是一个辅助问题，他们无法更改它。当新行发生时，应该可以预期该表可以更新。如果默认情况下不应启用此行为，则应有一个开关将其关闭。

无论如何，我们无法改变角度的材料。但是，我们基本上可以使用非常差的方法来执行此操作：

- 如果您直接将数组用作源：

call table.renderRows()

table是MAT -TABL

一个 排序和其他功能

table.renderrows（）令人惊讶地无法使用。因为Mat-Table在这里不一致。您需要使用hack来告诉源更改。您可以使用此方法进行操作：

this.dataSource.data = yourDataSource;

DataSource是用于分类和其他功能的Mattabledatasource包装器。

Answer 13

我使用两个资源实现了一个很好的解决方案：

刷新数据源和吊架：

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;
    ...

Answer 14

我已经尝试了一些以前的建议。它确实更新了表，但是我有一些疑问：

1. 更新 dataSource.data 及其克隆。例如

     this.datasource.data = [... this.datasource.data];
    

   如果数据很大，则将重新分配大量内存。此外，MaTable认为桌子内部的一切都是新的，因此可能会导致性能问题。我找到了我的桌子闪烁，我的桌子有大约300行。

2. 调用 paginator._changepagesize 。例如

     this.paginator._changepagesize（this.paginator.pagesize）;
    

   它将发射页面事件。如果您已经对 page 事件进行了一些处理。您可能会发现这很奇怪，因为该事件可能会多次发射。而且可能会有风险，如果某种情况将事件触发 _changePagesize（）间接地导致无限循环...

   我在这里建议另一种解决方案。如果您的表不依赖 dataSource 's filter field。

3. 您可以更新过滤器字段触发表刷新：

     this.datasource.filter =''; //请注意，这是一个空间，而不是空字符串
    

   这样做，表将执行过滤并因此更新表的UI。但是它需要您自己的 datasource.filterpredicate（）才能处理过滤逻辑。

Answer 15

我曾尝试过更换eTectorRef，主题和行为对象，但这对我有用：

dataSource = [];
this.dataSource = [];
setTimeout(() => {
  this.dataSource = this.tableData[data];
}, 200)

Answer 16

您可以使用“ Concat”轻松更新表的数据：

例如：

Leganagency.component.ts

teachDS: any[] = [];

Lagans.component.html

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

，当您更新数据（Leganagenage.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中对我来说是工作的，我没有尝试其他版本。

Answer 17

在Angular 10中，这对我有用：

在HTML中：

<mat-table [dataSource]="myArray">

在打字稿组件中：

myArray: MyObject[] = [];

addObjectToTable(object:MyObject): void {
    // To prevent duplicated objects

    if (object&& !this.myArray.includes(object)) {
        this.myArray.push(object);

        // To force the data table's datasource to refresh
        this.myArray= [...this.myArray];
    }
 }

Answer 18

这对我有用：

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

Answer 19

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

Answer 20

在我的情况下（Angular 6+），我从 mattabledatasource 创建 mydatasource 。 之后 this.data = somearray

this.entitiesSubject.next(this.data as T[])

数据未显示

class mydatasource

export class MyDataSource<T extends WhateverYouWant> extends MatTableDataSource<T> {

    private entitiesSubject = new BehaviorSubject<T[]>([]);


    loadDataSourceData(someArray: T[]){
        this.data = someArray //whenever it comes from an API asyncronously or not
        this.entitiesSubject.next(this.data as T[])// Otherwise data not displayed
    }

    public connect(): BehaviorSubject<T[]> {
        return this.entitiesSubject
    }

}//end Class 

Answer 21

我认为 mattabledatasource 对象与您传递给 mattabledataSource 构造函数的数据数组链接到某种方式。

例如：

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

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

因此，当您必须更改数据时；在原始列表上更改 dataTable ，然后通过call _UPDATECHANGESUBSCRIPEND（）方法 tables 反映表上的更改。

例如：

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

通过Angular 6与我一起工作。

Answer 22

这对我有用：

dataSource = new MatTableDataSource<Dict>([]);
    public search() {
        let url = `${Constants.API.COMMON}/dicts?page=${this.page.number}&` + 
        (this.name == '' ? '' : `name_like=${this.name}`);
    this._http.get<Dict>(url).subscribe((data)=> {
    // this.dataSource = data['_embedded'].dicts;
    this.dataSource.data =  data['_embedded'].dicts;
    this.page = data['page'];
    this.resetSelection();
  });
}

因此，您应该将数据量实例声明为 mattabledataSource

Answer 23

我做了更多的研究，发现了这个地方可以给我我所需的东西 - 从服务器刷新时会感到干净，并且与更新数据有关：
https://blog.angular-university.io/angular-university.io/angular-martular-material-material-material-material-data - 表/

上面页面的大多数学分。以下是如何使用MAT-SELECTOR更新到选择的数据源的MAT-selector的示例。我正在使用Angular 7。对不起，很广泛，试图完整但简洁 - 我已经撕掉了尽可能多的不需要零件。希望能帮助别人进步更快！

akurys.model.ts：

export class Organization {
    id: number;
    name: String;
}

andybom.service.ts：

import { Observable, empty } from 'rxjs';
import { of } from 'rxjs';

import { Organization } from './organization.model';

export class OrganizationService {
  getConstantOrganizations(filter: String): Observable<Organization[]> {
    if (filter === "All") {
      let Organizations: Organization[] = [
        { id: 1234, name: 'Some data' }
      ];
      return of(Organizations);
     } else {
       let Organizations: Organization[] = [
         { id: 5678, name: 'Some other data' }
       ];
     return of(Organizations);
  }

  // ...just a sample, other filterings would go here - and of course data instead fetched from server.
}

agrismationDatasource.model.ts：

import { CollectionViewer, DataSource } from '@angular/cdk/collections';
import { Observable, BehaviorSubject, of } from 'rxjs';
import { catchError, finalize } from "rxjs/operators";

import { OrganizationService } from './organization.service';
import { Organization } from './organization.model';

export class OrganizationDataSource extends DataSource<Organization> {
  private organizationsSubject = new BehaviorSubject<Organization[]>([]);

  private loadingSubject = new BehaviorSubject<boolean>(false);

  public loading$ = this.loadingSubject.asObservable();

  constructor(private organizationService: OrganizationService, ) {
    super();
  }

  loadOrganizations(filter: String) {
    this.loadingSubject.next(true);

    return this.organizationService.getOrganizations(filter).pipe(
      catchError(() => of([])),
      finalize(() => this.loadingSubject.next(false))
    ).subscribe(organization => this.organizationsSubject.next(organization));
  }

  connect(collectionViewer: CollectionViewer): Observable<Organization[]> {
    return this.organizationsSubject.asObservable();
  }

  disconnect(collectionViewer: CollectionViewer): void {
    this.organizationsSubject.complete();
    this.loadingSubject.complete();
  }
}

ashancomations.component.html：

<div class="spinner-container" *ngIf="organizationDataSource.loading$ | async">
    <mat-spinner></mat-spinner>
</div>

<div>
  <form [formGroup]="formGroup">
    <mat-form-field fxAuto>
      <div fxLayout="row">
        <mat-select formControlName="organizationSelectionControl" (selectionChange)="updateOrganizationSelection()">
          <mat-option *ngFor="let organizationSelectionAlternative of organizationSelectionAlternatives"
            [value]="organizationSelectionAlternative">
            {{organizationSelectionAlternative.name}}
          </mat-option>
        </mat-select>
      </div>
    </mat-form-field>
  </form>
</div>

<mat-table fxLayout="column" [dataSource]="organizationDataSource">
  <ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
    <mat-cell *matCellDef="let organization">{{organization.name}}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="number">
    <mat-header-cell *matHeaderCellDef>Number</mat-header-cell>
    <mat-cell *matCellDef="let organization">{{organization.number}}</mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>

ashancomations.component.component.scss：

.spinner-container {
    height: 360px;
    width: 390px;
    position: fixed;
}

andybor.com.component.ts：ts：

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { Observable } from 'rxjs';

import { OrganizationService } from './organization.service';
import { Organization } from './organization.model';
import { OrganizationDataSource } from './organizationdatasource.model';

@Component({
  selector: 'organizations',
  templateUrl: './organizations.component.html',
  styleUrls: ['./organizations.component.scss']
})
export class OrganizationsComponent implements OnInit {
  public displayedColumns: string[];
  public organizationDataSource: OrganizationDataSource;
  public formGroup: FormGroup;

  public organizationSelectionAlternatives = [{
    id: 1,
    name: 'All'
  }, {
    id: 2,
    name: 'With organization update requests'
  }, {
    id: 3,
    name: 'With contact update requests'
  }, {
    id: 4,
    name: 'With order requests'
  }]

  constructor(
    private formBuilder: FormBuilder,
    private organizationService: OrganizationService) { }

  ngOnInit() {
    this.formGroup = this.formBuilder.group({
      'organizationSelectionControl': []
    })

    const toSelect = this.organizationSelectionAlternatives.find(c => c.id == 1);
    this.formGroup.get('organizationSelectionControl').setValue(toSelect);

    this.organizationDataSource = new OrganizationDataSource(this.organizationService);
    this.displayedColumns = ['name', 'number' ];
    this.updateOrganizationSelection();
  }

  updateOrganizationSelection() {
    this.organizationDataSource.loadOrganizations(this.formGroup.get('organizationSelectionControl').value.name);
  }
}

Answer 24

阅读材料表不更新发布帖子数据更新＃11638错误报告
我发现最好的（阅读，最简单的解决方案）是最终评论者“ Shhdharmen”所建议的，建议使用EventEmitter。

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

即IE）在您的数据源类中添加一个新的私人变量

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

，以及我将新数据推向内部数组（this.data）的位置，我发出了一个事件。

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

最后，在“连接”方法中更改“数据卡”数组 - 如下

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

Answer 25

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

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

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

Answer 26

在Angular 15中，以前的解决方案都不适合我。

相反，我必须使用

 @ViewChild(MatTable) table!: MatTable<MyStruct>;
 ...
 this.table.renderRows();

stackblitz示例示例。

Answer 27

当您设置 dataSource.ts 文件而不是使用简单数组进行数据时，请使用主题和Getter/setter进行数据：

 dataStream = new BehaviorSubject<DataSourceItem[]>(EXAMPLE_DATA);
 set data(v: DataSourceItem[]) { this.dataStream.next(v); }
 get data(): DataSourceItem[] { return this.dataStream.value; }

然后在您的 connect（）中使用。函数使用dataStream主题这样：

return merge(this.dataStream, this.paginator.page, this.sort.sortChange)

因此，现在，当您更改dataSource.data array ...像这样：

this.dataSource.data = ['my','new','item']

它会触发 this.datastream.next（v）在setter和 connect（）功能将正确更新表。

可以在此处找到一个完整的工作示例：

Answer 28

尝试一下。它可能会帮助您。

从加载用户的功能开始。

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