角度+マテリアル - データソースをリフレッシュする方法（マットテーブル）

Question

私はマットテーブルを使用して、ユーザーが選択した言語のコンテンツを一覧表示しています。ダイアログパネルを使用して新しい言語を追加することもできます。言語を追加して戻った後、データソースを更新して、変更内容を表示します。

サービスからユーザーデータを取得し、そのデータソースをリフレッシュメソッドでデータソースに渡すことによって、データストアを初期化します。

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

言語データ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 
    } 

} 

だから私は、私はからユーザーを取得リフレッシュ方法を呼び出そうとしていますデータソースを再初期化します。しかし、これは動作しません、変更は発生していません。

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 1

トリガーpaginatorを変更するには、データの再読み込みをトリガーします。

簡単なトリックは：

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

これは、プライベート_emitPageEvent()機能を除いて何も変更は、テーブルのリロードをtriggeing、あまりにも呼ばれているので、基本的には、現在のページサイズにページサイズを更新します。

Answer 2

あなたがMatPaginatorを使用しているので、あなただけの必要があります。refresh()方法 でChangeDetectorRefを使用して、変化検出は、単に新しいデータを受け取った後に、コンストラクタでChangeDetectorRefを注入し、このようなdetectChangesを使用

Answer 3

これを行う最善の方法は、データソースの実装に追加の観測を追加することです。

接続メソッドでは、Observable.mergeを使用して、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 4

this.dataSource = new MatTableDataSource（this.elements）;

特定の行を追加または削除する行の下にこの行を追加します。

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