[解決済み] Angular + Material - データソース(mat-table)を更新する方法
2022-04-16 17:02:42
質問
を使用しています。 マットテーブル ユーザーが選択した言語のコンテンツをリストアップするために。また、ダイアログパネルを使用して新しい言語を追加することができます。彼らが言語を追加し、戻ってきた後。データソースが更新され、ユーザーが行った変更が表示されるようにしたい。
サービスからユーザーデータを取得してデータストアを初期化し、それをrefreshメソッドでデータソースに渡しています。
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);
});
}
}
言語データソース.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
}
}
そこで、リフレッシュ・メソッドを呼び出して、バックエンドからユーザーを再度取得し、データソースを再初期化することを試みました。しかし、これはうまくいかず、何の変化も起こりません。
どうすればいいですか?
変更検知のトリガーは
ChangeDetectorRef
の中で
refresh()
メソッド
新しいデータを受信した直後に
変更検出器Ref
をコンストラクタで使用し
detectChanges
このように
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();
});
}
}
関連
-
[解決済み] Androidのリストビューを更新する方法は?
-
[解決済み] CLIを使ったAngular 2 - 制作のためのビルド
-
[解決済み] Angular [disabled]="MyBoolean "が動作しない。
-
[解決済み] jQueryでページを更新するにはどうすればよいですか?
-
[解決済み] Angularアプリを本番用にバンドルする方法
-
[解決済み] Angular 2のキープレスごとの変更イベント
-
[解決済み] Angularのルーティングされたコンポーネントにデータを渡すにはどうしたらいいですか?
-
[解決済み] 設定ファイルにng serveのデフォルトのホストとポートを設定する。
-
[解決済み] Angular 2のパッシブリンク - <a href="">相当
-
[解決済み] @angular/material/index.d.ts' はモジュールではありません。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
angularjs ポップアップボックスの方法1
-
Node Sass は現在の環境のためのバインディングを見つけることができませんでした。Windows 64ビット、Node.js 8.x。
-
[解決済み] formGroup' は 'form' の既知のプロパティではないため、バインドできません。
-
[解決済み] Angularで変更検知を手動でトリガーする
-
[解決済み】プロパティ「of」が「typeof Observable」型に存在しない【重複
-
[解決済み] Angular 5 - クリップボードにコピーする
-
[解決済み] Angular + Material - データソース(mat-table)を更新する方法
-
[解決済み] viewchildを使用して複数のviewchildrenにアクセスする
-
[解決済み] ナンバーパイプ - Angular 2のパラメータは?
-
[解決済み] Angular Materialダイアログエリアの外をクリックしてダイアログを閉じないようにする(Angularバージョン4.0以上で使用可能)