Angular + Material - Bir veri kaynağı nasıl yenilenir (mat-table)

Seçilen dillerin içeriğini listelemek için bir mat-masa kullanıyorum . Ayrıca iletişim panelini kullanarak yeni diller ekleyebilirler. Bir dil ekledikten ve geri döndükten sonra. Veri kaynağımın yaptıkları değişiklikleri gösterecek şekilde yenilenmesini istiyorum.

Bir hizmetten kullanıcı verilerini alarak ve yenileme yönteminde bir veri kaynağına geçirerek veri deposunu başlatıyorum.

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

dil-veri-kaynak.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
  }

}

Bu yüzden kullanıcıyı arka uçtan tekrar aldığım bir yenileme yöntemi çağırmaya çalıştım ve ardından veri kaynağını yeniden başlattım. Ancak bu işe yaramıyor, hiçbir değişiklik olmuyor.

Tetik kullanarak bir değişimi saptama ChangeDetectorRefolarak refresh()yöntem, sadece iğne, yeni verilerin alınması sonrasında ChangeDetectorRef yapıcı ve kullanım içinde detectChanges örneğin:

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

ChangeDetectorRefSoru oluşturulduğunda bunun gerekli olup olmadığını bilmiyorum ama şimdi bu yeterli:

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

// ...

dataSource = new MatTableDataSource<MyDataType>();

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

Örnek:
StackBlitz

Bu yüzden benim için hiç kimse karşılaştığım soruna iyi bir cevap vermedi ki bu da @Kay ile neredeyse aynı. Benim için bu sıralama ile ilgili, sıralama tablosu matta değişiklikler meydana gelmiyor. Bu cevabı amaçladım çünkü google'da arama yaparak bulduğum tek konu bu. Angular 6 kullanıyorum.

As söyledi buraya :

Tablo performansı optimize ettiğinden, veri dizisindeki değişiklikleri otomatik olarak kontrol etmeyecektir. Bunun yerine, veri dizisine nesneler eklendiğinde, kaldırıldığında veya taşındığında, bunun renderRows () yöntemini çağırarak tablonun oluşturulmuş satırlarında bir güncellemeyi tetikleyebilirsiniz.

Dolayısıyla , değişikliklerinizin görünmesi için yenileme () yönteminizde renderRows () 'u çağırmanız yeterlidir .

Entegrasyon için buraya bakın .

Kullandığınız yana MatPaginator, sadece, paginator herhangi bir değişiklik yapmak için bu tetikleyici veri yeniden yüklenmesine gerek.

Basit numara:

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

Bu, sayfa boyutunu geçerli sayfa boyutuna günceller, bu nedenle, özel _emitPageEvent()işlevin de çağrılması dışında, tablonun yeniden yüklenmesini tetiklemesi dışında, temelde hiçbir şey değişmez .

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

Bu satırı, belirli bir satırı ekleme veya silme eyleminizin altına ekleyin.

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

Bunu yapmanın en iyi yolu, Veri Kaynağı uygulamanıza ek bir gözlemlenebilir öğe eklemektir.

Connect yönteminde Observable.merge, paginator.page, sort.sortChange, vb. İçeren bir gözlemlenebilirler dizisine abone olmak için zaten kullanıyor olmalısınız. Buna yeni bir konu ekleyebilir ve bir yenilemeye neden olmanız gerektiğinde onu çağırabilirsiniz.

bunun gibi bir şey:

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

Ve sonra recordChange$.next()bir yenileme başlatmak için arayabilirsin .

Doğal olarak, çağrıyı bir yenileme () yöntemine sarar ve bileşendeki w / veri kaynağı örneğinden ve diğer uygun teknikleri çağırırdım.

Veri kaynağı bağlantı işlevini kullanabilirsiniz

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

bunun gibi. 'veri', datatable için yeni değerler olarak

"Concat" kullanarak tablonun verilerini kolayca güncelleyebilirsiniz:

Örneğin:

language.component.ts

teachDS: any[] = [];

language.component.html

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

Ve verileri güncellediğinizde (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" açısal kullandığınızda, nesnenin (this.teachDS) değişikliklerini tespit edin ve başka bir şey kullanmanıza gerek kalmaz.

PD: Açısal 6 ve 7'de benim için çalışıyor, başka bir versiyon denemedim.

Angular 9'da sır şudur: this.dataSource.data = this.dataSource.data;

Misal:

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

RenderRows () yöntemini de kullanabilirsiniz.

@ViewChild (MatTable, {statik: false}) tablo: MatTable // başlat

sonra this.table.renderRows ();

referans için bunu kontrol edin -: https://www.freakyjolly.com/angular-7-8-edit-add-delete-rows-in-material-table-with-using-dialogs-inline-row-operation/

Veri kaynağına bir şey eklediğim ve yeniden yüklenmediği benzer bir sorunla karşılaştım.

Bulduğum en kolay yol, verileri yeniden atamaktı

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

İki kaynağı kullanarak iyi bir çözüme ulaştım:

hem dataSource hem de paginator'u yenileme:

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

örneğin dataSource burada tanımlanmıştır:

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

benim durumumda (Angular 6+), ' MatTableDataSourceden oluşturmak için miras aldım MyDataSource. Sonra aramadanthis.data = someArray

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

görüntülenmeyen veriler

sınıf 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 

Bunu yapmanın iki yolu vardır çünkü Angular Material tutarsızdır ve bu çok zayıf bir şekilde belgelenmiştir. Yeni bir satır geldiğinde açısal malzeme tablosu güncellenmez. Şaşırtıcı bir şekilde bunun performans sorunları olduğu söyleniyor. Ama daha çok tasarım gereği gibi görünüyor, değiştiremezler. Yeni satır oluştuğunda tablonun güncellenmesi beklenmelidir. Bu davranışın varsayılan olarak etkinleştirilmemesi gerekiyorsa, onu kapatmak için bir anahtar bulunmalıdır.

Her neyse, Angular Material'i değiştiremiyoruz. Ancak bunu yapmak için temelde çok az belgelenmiş bir yöntem kullanabiliriz:

Bir - doğrudan kaynak olarak bir dizi kullanıyorsanız:

call table.renderRows()

tablo, mat tablonun ViewChild olduğu yer

İkincisi - sıralama ve diğer özellikleri kullanıyorsanız

table.renderRows () şaşırtıcı bir şekilde çalışmayacak. Çünkü mat-masa burada tutarsız. Kaynağın değiştiğini söylemek için bir hack kullanmanız gerekir. Bunu şu yöntemle yaparsınız:

this.dataSource.data = yourDataSource;

dataSource, sıralama ve diğer özellikler için kullanılan MatTableDataSource sarmalayıcısıdır.

Bu benim için çalıştı:

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

MatTableDataSourceNesnenin, oluşturucuya ilettiğiniz veri dizisiyle bir şekilde bağlantılı olduğunu düşünüyorum MatTableDataSource.

Örneğin:

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

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

Yani, verileri değiştirmeniz gerektiğinde; orijinal listede değişiklik yapın dataTableve ardından değişikliği çağırma _updateChangeSubscription()yöntemi ile tabloya yansıtın tableDS.

Örneğin:

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

Bu benimle Angular 6 aracılığıyla çalışın.

Bu benim için çalışıyor:

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

Bu nedenle, veri kaynağı örneğinizi şu şekilde bildirmelisiniz: MatTableDataSource

Biraz daha araştırma yaptım ve bu yeri bana ihtiyacım olanı vermek için buldum - temiz hissediyor ve sunucudan yenilendiğinde verileri güncellemekle ilgili: https://blog.angular-university.io/angular-material-data-table/

Kredilerin çoğu yukarıdaki sayfaya. Aşağıda, seçim değişikliği üzerine bir veri kaynağına bağlı bir mat-tabloyu güncellemek için bir mat seçicinin nasıl kullanılabileceğine dair bir örnek verilmiştir. Angular 7 kullanıyorum. Kapsamlı olduğum için özür dilerim, eksiksiz ama kısa olmaya çalışıyorum - Mümkün olduğunca çok sayıda ihtiyaç duyulmayan parçayı söktüm. Bu, bir başkasının daha hızlı ilerlemesine yardımcı olma umuduyla!

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

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

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

Materyal Tablosunu okuduktan sonra veri güncellemesini güncellemiyor # 11638 Hata Raporu En iyi olanı buldum (en kolay çözümü okuyun), bir EventEmitter kullanma önerisiyle birlikte son yorumcu 'shhdharmen' tarafından önerildiği gibi oldu.

Bu, oluşturulan veri kaynağı sınıfında birkaç basit değişikliği içerir

yani) veri kaynağı sınıfınıza yeni bir özel değişken ekleyin

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

ve yeni verileri iç diziye (this.data) gönderdiğim yerde, bir olay yayınlıyorum.

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

ve son olarak, 'connect' yöntemindeki 'dataMutation' dizisini aşağıdaki gibi değiştirin

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

// bu dataSource
this.guests = [];

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

// dataSource'u yenileyin this.guests = Array.from (this.guest);

npm install @matheo/datasource

Gelecekte resmi Materyal Veri Kaynağı olmayı hedefleyen, her türlü giriş akışını (sıralama, sayfalandırma, filtreler) ve kodlama sırasında nasıl çalıştığını görmek için hata ayıklama ile bazı yapılandırmaları destekleyen bir kütüphane yayınladım.

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

StackBlitz demosunu ve daha fazla bilgiyi burada bulabilirsiniz:
https://medium.com/@matheo/reactive-datasource-for-angular-1d869b0155f6

Fikrinizi duymaktan ve gerekirse kullanım durumlarınızı desteklemekten memnuniyet duyarım.
Mutlu kodlamalar!

ChangeDetectorRef, Subject and BehaviourSubject'i denedim ama benim için işe yarayan

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