Winkel + Material - So aktualisieren Sie eine Datenquelle (Mat-Tabelle)

Ich verwende eine Mat-Tabelle, um den Inhalt der vom Benutzer ausgewählten Sprachen aufzulisten. Sie können auch neue Sprachen über das Dialogfeld hinzufügen. Nachdem sie eine Sprache hinzugefügt und zurückgekehrt waren. Ich möchte, dass meine Datenquelle aktualisiert wird, um die vorgenommenen Änderungen anzuzeigen.

Ich initialisiere den Datenspeicher, indem ich Benutzerdaten von einem Dienst abrufe und diese in der Aktualisierungsmethode an eine Datenquelle übergebe.

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
  }

}

Daher habe ich versucht, eine Aktualisierungsmethode aufzurufen, bei der der Benutzer erneut aus dem Backend abgerufen und dann die Datenquelle neu initialisiert wird. Dies funktioniert jedoch nicht, es treten keine Änderungen auf.

Lösen Sie eine Änderungserkennung aus, indem Sie ChangeDetectorRefdie refresh()Methode direkt nach dem Empfang der neuen Daten verwenden, ChangeDetectorRef in den Konstruktor einfügen und detectChanges wie folgt verwenden :

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

Ich weiß nicht, ob das ChangeDetectorReferforderlich war, als die Frage erstellt wurde, aber jetzt ist dies genug:

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

// ...

dataSource = new MatTableDataSource<MyDataType>();

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

Beispiel:
StackBlitz

Für mich gab niemand die gute Antwort auf das Problem, das ich getroffen habe und das fast das gleiche ist wie @Kay. Für mich geht es um das Sortieren, Sortiertabellen treten keine Änderungen in der Matte auf. Ich beabsichtige diese Antwort, da es das einzige Thema ist, das ich bei der Suche in Google finde. Ich benutze Angular 6.

Wie hier gesagt :

Da die Tabelle hinsichtlich der Leistung optimiert wird, wird nicht automatisch nach Änderungen am Datenarray gesucht. Wenn Objekte zum Datenarray hinzugefügt, entfernt oder verschoben werden, können Sie stattdessen eine Aktualisierung der gerenderten Zeilen der Tabelle auslösen, indem Sie die Methode renderRows () aufrufen.

So müssen Sie nur noch rufen renderRows () in der refresh () Methode , um Ihre Änderungen angezeigt werden.

Siehe hier für die Integration.

Da Sie verwenden MatPaginator, müssen Sie nur Änderungen am Paginator vornehmen. Dies löst ein erneutes Laden der Daten aus.

Einfacher Trick:

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

Dadurch wird die Seitengröße auf die aktuelle Seitengröße aktualisiert, sodass sich im Grunde nichts ändert, außer dass auch die private _emitPageEvent()Funktion aufgerufen wird, wodurch das erneute Laden der Tabelle ausgelöst wird.

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

Fügen Sie diese Zeile unterhalb Ihrer Aktion zum Hinzufügen oder Löschen der jeweiligen Zeile hinzu.

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

Der beste Weg, dies zu tun, besteht darin, Ihrer Datenquellenimplementierung ein zusätzliches Observable hinzuzufügen.

In der Connect-Methode sollten Sie bereits Observable.mergeein Array von Observables abonnieren, zu denen paginator.page, sort.sortChange usw. gehören. Sie können diesem einen neuen Betreff hinzufügen und ihn als Nächstes aufrufen, wenn Sie eine Aktualisierung veranlassen müssen.

etwas wie das:

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

Und dann können Sie anrufen recordChange$.next(), um eine Aktualisierung zu starten.

Natürlich würde ich den Aufruf in eine refresh () -Methode einschließen und ihn von der Datenquelleninstanz w / in der Komponente und anderen geeigneten Techniken abrufen.

Sie können einfach die Datenquellen-Verbindungsfunktion verwenden

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

wie so. 'Daten' sind die neuen Werte für die Datentabelle

Sie können die Daten der Tabelle einfach mit "concat" aktualisieren:

beispielsweise:

language.component.ts

teachDS: any[] = [];

language.component.html

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

Und wenn Sie die Daten aktualisieren (language.component.ts):

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

Wenn Sie "concat" eckig verwenden, erkennen Sie die Änderungen des Objekts (this.teachDS) und Sie müssen nichts anderes verwenden.

PD: Es funktioniert für mich in Winkel 6 und 7, ich habe keine andere Version ausprobiert.

Sie können auch die renderRows () -Methode verwenden.

@ ViewChild (MatTable, {static: false}) Tabelle: MatTable // initialisieren

dann this.table.renderRows ();

Als Referenz überprüfen Sie dies -: https://www.freakyjolly.com/angular-7-8-edit-add-delete-rows-in-material-table-with-using-dialogs-inline-row-operation/

Nun, ich bin auf ein ähnliches Problem gestoßen, bei dem ich der Datenquelle etwas hinzugefügt habe und es nicht neu geladen wird.

Der einfachste Weg, den ich gefunden habe, war einfach, die Daten neu zuzuweisen

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

In Angular 9 ist das Geheimnis this.dataSource.data = this.dataSource.data;

Beispiel:

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

Ich habe mit zwei Ressourcen eine gute Lösung erzielt:

Aktualisieren von dataSource und paginator:

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

Hier wird beispielsweise dataSource definiert:

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

In meinem Fall (Angular 6+) habe ich geerbt MatTableDataSource, um zu erstellen MyDataSource. Ohne Aufruf nachthis.data = someArray

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

Daten wurden nicht angezeigt

Klasse 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 

Es gibt zwei Möglichkeiten, dies zu tun, da Angular Material inkonsistent ist und dies sehr schlecht dokumentiert ist. Die Winkelmaterialtabelle wird nicht aktualisiert, wenn eine neue Zeile eintrifft. Überraschenderweise wird gesagt, dass es an Leistungsproblemen liegt. Aber es sieht eher nach einem Designproblem aus, sie können sich nicht ändern. Es sollte erwartet werden, dass die Tabelle aktualisiert wird, wenn eine neue Zeile auftritt. Wenn dieses Verhalten nicht standardmäßig aktiviert sein soll, sollte es einen Schalter zum Ausschalten geben.

Auf jeden Fall können wir Angular Material nicht ändern. Grundsätzlich können wir jedoch eine sehr schlecht dokumentierte Methode verwenden:

Eins - wenn Sie ein Array direkt als Quelle verwenden:

call table.renderRows()

Dabei ist table ViewChild der Mat-Tabelle

Zweitens - wenn Sie Sortierung und andere Funktionen verwenden

table.renderRows () funktioniert überraschenderweise nicht. Weil mat-table hier inkonsistent ist. Sie müssen einen Hack verwenden, um die geänderte Quelle mitzuteilen. Sie machen es mit dieser Methode:

this.dataSource.data = yourDataSource;

Dabei ist dataSource der MatTableDataSource-Wrapper, der zum Sortieren und für andere Funktionen verwendet wird.

Das hat bei mir funktioniert:

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

Ich denke, das MatTableDataSourceObjekt ist in irgendeiner Weise mit dem Datenarray verknüpft, das Sie an den MatTableDataSourceKonstruktor übergeben.

Zum Beispiel:

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

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

Also, wenn Sie Daten ändern müssen; Ändern Sie in der ursprünglichen Liste dataTableund spiegeln Sie dann die Änderung in der Tabelle durch die _updateChangeSubscription()Aufrufmethode ein tableDS.

Zum Beispiel:

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

Das ist Arbeit mit mir durch Angular 6.

Das funktioniert bei mir:

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

Daher sollten Sie Ihre Datenquelleninstanz als deklarieren MatTableDataSource

Ich habe weitere Nachforschungen angestellt und diesen Ort gefunden, um mir das zu geben, was ich brauchte - fühlt sich sauber an und bezieht sich auf Aktualisierungsdaten, wenn diese vom Server aktualisiert werden: https://blog.angular-university.io/angular-material-data-table/

Die meisten Credits auf der obigen Seite. Im Folgenden finden Sie ein Beispiel dafür, wie ein Mattenselektor verwendet werden kann, um eine Mattentabelle zu aktualisieren, die bei Änderung der Auswahl an eine Datenquelle gebunden ist. Ich verwende Angular 7. Es tut mir leid, dass ich umfangreich bin und versuche, vollständig, aber präzise zu sein. Ich habe so viele nicht benötigte Teile wie möglich herausgerissen. In der Hoffnung, jemand anderem zu helfen, schneller voranzukommen!

organisation.model.ts:

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

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

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

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

organisations.component.scss:

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

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

Nachdem ich die Materialtabelle gelesen hatte, die nach der Aktualisierung der Daten nicht aktualisiert wurde # 11638 Fehlerbericht Ich fand die beste (gelesene, einfachste Lösung), wie vom letzten Kommentator 'shhdharmen' mit einem Vorschlag zur Verwendung eines EventEmitter vorgeschlagen.

Dies beinhaltet einige einfache Änderungen an der generierten Datenquellenklasse

dh) fügen Sie Ihrer Datenquellenklasse eine neue private Variable hinzu

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

und wo ich neue Daten in das interne Array (this.data) schiebe, gebe ich ein Ereignis aus.

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

und schließlich ändern Sie das Array 'dataMutation' in der Methode 'connect' wie folgt

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

// das ist die dataSource
this.guests = [];

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

// aktualisiere die dataSource this.guests = Array.from (this.guest);

npm install @matheo/datasource

Ich habe eine Bibliothek veröffentlicht, die in Zukunft die offizielle Material DataSource sein soll und jede Art von Eingabestreams (Sortieren, Paginieren, Filtern) und einige Konfigurationen mit Debugging unterstützt, um zu sehen, wie es beim Codieren funktioniert.

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

Die StackBlitz-Demo und weitere Informationen finden Sie hier:
https://medium.com/@matheo/reactive-datasource-for-angular-1d869b0155f6

Ich würde mich freuen, Ihre Meinung zu hören und Ihre Anwendungsfälle bei Bedarf zu unterstützen.
Viel Spaß beim Codieren!

Ich hatte ChangeDetectorRef, Subject und BehaviourSubject ausprobiert, aber was funktioniert für mich?

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