我使用mat-table来列出用户 Select 的语言的内容.他们还可以使用对话框面板添加新语言.在他们添加了一种语言之后,就回来了.我希望刷新我的数据源以显示他们所做的更改.

我通过从服务获取用户数据并在刷新方法中将其传递到数据源来初始化数据存储.

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
  }

}

所以我try 调用一个刷新方法,再次从后端获取用户,然后重新初始化数据源.然而,这不起作用,没有发生任何变化.

推荐答案

refresh()方法中使用ChangeDetectorRef触发变化检测

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

Angular相关问答推荐

Angular:浏览器中未显示一些Google Content图标

日语字符不受角形约束控制

如何在每次Angular 编译之前执行脚本(esbuild)

导致无限请求的Angular HttpInterceptor和HttpClientModule

MAT表的内联文本编辑-未刷新编辑图标

Change上的Angular 自定义控件无法正常工作

Angular KendoGrid RowReorderable,drop不适用于新添加的行

无法在Mat-SideNav中绑定模式

在指令中获取宿主组件的templateRef

Observable转换为Observable

MAT折叠面板的动态开启和关闭无法工作

Angular 15:在范围内提供相同标记时附加到提供的值

Angular 13 - 何时创建嵌入式视图?

尽管模型中的变量发生了变化,但Angular 视图没有更新

如何在 Angular 2 中使用 protractor ?

Angular 2如何使用路由和location.go()检测后退按钮按下?

可从 Angular2 中的

Angular2 - 如何开始以及使用哪个 IDE

BrowserAnimationsModule 和 NoopAnimationsModule 有什么区别?

Angular CLI 为已经存在的组件创建 .spec 文件