Angular + Material - Como atualizar uma fonte de dados (esteira)

Estou usando um tapete para listar o conteúdo dos idiomas escolhidos pelos usuários. Eles também podem adicionar novos idiomas usando o painel de diálogo. Depois eles adicionaram um idioma e voltaram. Quero que minha fonte de dados seja atualizada para mostrar as alterações que eles fizeram.

Eu inicializo o armazenamento de dados obtendo dados do usuário de um serviço e passando-os para uma fonte de dados no método de atualização.

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
  }

}

Tentei chamar um método de atualização em que obtenho o usuário do back-end novamente e reinicializo a fonte de dados. No entanto, isso não funciona, nenhuma alteração está ocorrendo.

Acione uma detecção de mudança usando ChangeDetectorRefo refresh()método logo após receber os novos dados, injete ChangeDetectorRef no construtor e use detectChanges como este:

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

Não sei se ChangeDetectorRefera necessário quando a pergunta foi criada, mas agora basta:

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

// ...

dataSource = new MatTableDataSource<MyDataType>();

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

Exemplo:
StackBlitz

Então, para mim, ninguém deu uma boa resposta para o problema que encontrei que é quase o mesmo que @Kay. Para mim trata-se de classificar, a classificação da mesa não ocorre mudanças no tapete. Proponho esta resposta, pois é o único tópico que encontro pesquisando no google. Estou usando o Angular 6.

Como disse aqui :

Como a tabela é otimizada para desempenho, ela não verificará automaticamente se há alterações na matriz de dados. Em vez disso, quando os objetos são adicionados, removidos ou movidos no array de dados, você pode acionar uma atualização nas linhas renderizadas da tabela chamando seu método renderRows ().

Portanto, você só precisa chamar renderRows () em seu método refresh () para fazer suas alterações aparecerem.

Veja aqui para integração.

Já que você está usando MatPaginator, você só precisa fazer qualquer alteração no paginator, isso aciona a recarga dos dados.

Truque simples:

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

Isso atualiza o tamanho da página para o tamanho da página atual, então basicamente nada muda, exceto a _emitPageEvent()função privada também é chamada, iniciando o recarregamento da tabela.

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

Adicione esta linha abaixo de sua ação de adicionar ou excluir a linha particular.

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

A melhor maneira de fazer isso é adicionando um observável adicional à implementação da fonte de dados.

No método de conexão, você já deve estar usando Observable.mergepara assinar uma matriz de observáveis ​​que incluem paginator.page, sort.sortChange, etc. Você pode adicionar um novo assunto a isso e chamar next quando precisar causar uma atualização.

algo assim:

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

E então você pode ligar recordChange$.next()para iniciar uma atualização.

Naturalmente, eu envolveria a chamada em um método refresh () e a chamaria da instância da fonte de dados com o componente e outras técnicas adequadas.

Você pode apenas usar a função de conexão da fonte de dados

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

igual a. 'dados' sendo os novos valores para a tabela de dados

Você pode atualizar facilmente os dados da tabela usando "concat":

por exemplo:

language.component.ts

teachDS: any[] = [];

language.component.html

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

E, quando você atualizar os dados (language.component.ts):

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

Quando você estiver usando o angular "concat" detecte as alterações do objeto (this.teachDS) e não precise usar outra coisa.

PD: Funcionou para mim no angular 6 e 7, não tentei outra versão.

Você também pode usar o método renderRows ().

@ViewChild (MatTable, {static: false}) table: MatTable // inicializar

então this.table.renderRows ();

para referência, verifique isto -: https://www.freakyjolly.com/angular-7-8-edit-add-delete-rows-in-material-table-with-using-dialogs-inline-row-operation/

Bem, eu encontrei um problema semelhante em que adicionei algo à fonte de dados e ele não estava recarregando.

A maneira mais fácil que encontrei é simplesmente reatribuir os dados

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

No Angular 9, o segredo é this.dataSource.data = this.dataSource.data;

Exemplo:

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

Consegui uma boa solução usando dois recursos:

atualizando dataSource e paginator:

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

onde, por exemplo, dataSource é definido aqui:

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

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

no meu caso (Angular 6+), herdei de MatTableDataSourcepara criar MyDataSource. Sem ligar depoisthis.data = someArray

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

dados onde não são exibidos

classe 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 

Há duas maneiras de fazer isso porque o material angular é inconsistente e está muito mal documentado. A tabela de material angular não será atualizada quando uma nova linha chegar. Surpreendentemente, dizem que é por causa dos problemas de desempenho. Mas parece mais um problema de design, eles não podem mudar. Deve-se esperar que a tabela seja atualizada quando ocorrer uma nova linha. Se esse comportamento não deve ser ativado por padrão, deve haver um interruptor para desligá-lo.

De qualquer forma, não podemos alterar o material angular. Mas podemos basicamente usar um método muito mal documentado para fazer isso:

Um - se você usar um array diretamente como fonte:

call table.renderRows()

em que table é ViewChild da mesa-tapete

Segundo - se você usar classificação e outros recursos

table.renderRows () surpreendentemente não funcionará. Porque a mesa-tapete é inconsistente aqui. Você precisa usar um hack para dizer que a fonte mudou. Você faz isso com este método:

this.dataSource.data = yourDataSource;

onde dataSource é o wrapper MatTableDataSource usado para classificação e outros recursos.

Isso funcionou para mim:

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

Eu acho que o MatTableDataSource objeto está de alguma forma vinculado ao array de dados que você passa para o MatTableDataSourceconstrutor.

Por exemplo:

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

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

Então, quando você tiver que alterar os dados; mudança na lista original dataTablee, em seguida, reflete a mudança na mesa por chamada_updateChangeSubscription() método de em tableDS.

Por exemplo:

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

Isso é trabalho comigo por meio do Angular 6.

Isso está funcionando para mim:

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

Portanto, você deve declarar sua instância da fonte de dados como MatTableDataSource

Eu fiz mais pesquisas e encontrei este lugar para me dar o que eu precisava - parece limpo e relacionado a atualização de dados quando atualizado do servidor: https://blog.angular-university.io/angular-material-data-table/

A maioria dos créditos para a página acima. Abaixo está um exemplo de como um seletor de esteira pode ser usado para atualizar uma tabela de esteira ligada a uma fonte de dados na mudança de seleção. Estou usando o Angular 7. Desculpe por ser extenso, tentando ser completo, mas conciso - rasguei o máximo possível de partes desnecessárias. Com isso na esperança de ajudar alguém a avançar mais rápido!

organization.model.ts:

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

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

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

organizações.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>

organization.component.scss:

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

organization.component.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);
  }
}

Depois de ler a tabela de materiais não atualizando a atualização de dados de postagem # 11638, Relatório de bug eu achei que a melhor (leia, a solução mais fácil) foi sugerida pelo comentador final 'shhdharmen' com uma sugestão para usar um EventEmitter.

Isso envolve algumas mudanças simples na classe da fonte de dados gerada

ou seja) adicione uma nova variável privada à sua classe de fonte de dados

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

e onde coloco novos dados no array interno (this.data), emito um evento.

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

e, finalmente, altere a matriz 'dataMutation' no método 'conectar' - como segue

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

// esta é a
fonte de dados this.guests = [];

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

// atualize o dataSource this.guests = Array.from (this.guest);

npm install @matheo/datasource

Lancei uma biblioteca com o objetivo de ser o Material DataSource oficial no futuro, suportando qualquer tipo de fluxo de entrada (classificação, paginação, filtros) e alguma configuração com depuração para ver como funciona enquanto você está codificando.

import { MatDataSourceModule } from '@matheo/datasource';

Você pode encontrar a demonstração StackBlitz e mais informações aqui:
https://medium.com/@matheo/reactive-datasource-for-angular-1d869b0155f6

Terei prazer em ouvir sua opinião e apoiar seus casos de uso, se necessário.
Boa codificação!

Eu tentei ChangeDetectorRef, Subject e BehaviourSubject, mas o que funciona para mim

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