从 angular 7 中的其他组件或服务刷新 mat 数据源

Question

我有 2 个组件，即项目和项目列表，然后是项目服务。 project.component.ts 具有要提交和项目的表单。list1.component.ts 显示项目列表。

当我在 project.component.ts 中提交项目表单时，我想刷新项目。list1.component listData 是 MatDatasourcetable。我尝试在提交表单后从 project.component.ts 调用服务方法 refreshList() 或 getProjectList() 但它没有刷新 listData。我还按照其他人的建议注入了 ChangeDetectorRef 但这也不会刷新 matdatasource。我想弄清楚的事情。每当我 submit/update 时，项目列表必须立即刷新以显示更新的列表记录。

project.component.ts

import { Component, OnInit, Input, ChangeDetectorRef, ViewChild, ElementRef, EventEmitter, Output } from '@angular/core';
import { MatTableDataSource } from '@angular/material';
import { ProjectService } from 'src/app/shared/project.service';
import { ToastrService } from 'ngx-toastr';
import { NgForm} from '@angular/forms';
import { ProjectModel } from 'src/app/shared/project.model';
import { Observable } from 'rxjs';
import { UserService } from 'src/app/users/user.service';
import { User } from 'src/app/users/user.model';
import { DOCUMENT } from '@angular/common';
import { ModalDirective } from 'ngx-bootstrap/modal';

@Component({
  selector: 'app-project',
  templateUrl: './project.component.html',
  styleUrls: ['./project.component.css']
})
export class ProjectComponent implements OnInit {

  constructor(private service: ProjectService,private changeDetectorRef: ChangeDetectorRef,private toastr: ToastrService, private userService: UserService) { }

    isValidDate: any;
    error:any={isError:false,errorMessage:''};
    minDate: Date;
    IsChecked:boolean;

  ngOnInit() {
    this.resetForm(); 
  }
  resetForm(form?: NgForm) {
    if (form != null)
      form.resetForm();
    this.service.formData = {
      ProjectID: null,
      ProjectName: '',
      StartDate:null ,
      EndDate:null              
    }         
  }

  onSubmit(form: NgForm) {    
      if (form.value.ProjectID == null)    
        this.insertRecord(form);
      else
        this.updateRecord(form);   
  }

  insertRecord(form: NgForm) {
    this.service.postProject(form.value).subscribe(res => {
      this.toastr.success('Inserted successfully', 'Project. Register');
      this.resetForm(form);
      //this.service.refreshList(); 
      //this.service.getProjectList();
    });
   this.changeDetectorRef.detectChanges();
  }

  updateRecord(form: NgForm) {
    this.service.putProject(form.value).subscribe(res => {
      this.toastr.info('Updated successfully', 'Project. Register');
      this.resetForm(form);
      //this.service.refreshList();
      //this.service.getProjectList();           
    });
    this.changeDetectorRef.detectChanges();
  }   
}

项目-list1.component.ts

import { Component, OnInit, ViewChild, HostBinding } from '@angular/core';
import { ProjectService } from 'src/app/shared/project.service';
import { MatTableDataSource,MatSort,MatPaginator } from '@angular/material';
import { ProjectModel } from 'src/app/shared/project.model';
import { ToastrService } from 'ngx-toastr';

@Component({
  selector: 'app-project-list1',
  templateUrl: './project-list1.component.html',
  styleUrls: ['./project-list1.component.css']
})
export class ProjectList1Component implements OnInit {

  constructor(private service: ProjectService,
    private toastr: ToastrService) { }     

  listData: MatTableDataSource<any>;
  displayedColumns: string[] = ['ProjectName', 'StartDate', 'EndDate'];
  @ViewChild(MatSort,null) sort: MatSort;
  @ViewChild(MatPaginator,null) paginator: MatPaginator;
  searchKey: string;

  ngOnInit() {  
    this.refreshList();          
  }

  refreshList(){
    this.service.getProjectList().subscribe(data =>{    
      this.listData = new MatTableDataSource(data);
      this.listData.sort = this.sort;
      this.listData.paginator = this.paginator;
    });
  } 
}

项目-list1.component.html

  <mat-table [dataSource]="listData" matSort>

project.service.ts

import { Injectable } from '@angular/core';
import { ProjectModel } from './project.model';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ProjectService {
  formData  : ProjectModel;
  list : ProjectModel[];
  readonly rootURL ="http://localhost:65462/api"

  constructor(private http: HttpClient) { }

  postProject(formData : ProjectModel){
    console.log(formData);  
    return this.http.post(this.rootURL+'/Project',formData);     
   }

   getProjectList(): Observable<ProjectModel[]>{
     return this.http.get<ProjectModel[]>(this.rootURL+'/Project/');
   }

   refreshList(){
     return this.http.get(this.rootURL+'/Project')
     .toPromise().then(res => this.list = res as ProjectModel[]);
    }

  }

Answer 1

您应该在 project.service.ts 中使用 observable 以便更轻松地订阅更改。例如

export class ProjectService {
  formData  : ProjectModel;
-->  list$ : BehaviorSubject<ProjectModel[]> = new BehaviorSubject([]);
  readonly rootURL ="http://localhost:65462/api"

  constructor(private http: HttpClient) { }

  postProject(formData : ProjectModel){
    console.log(formData);  
    return this.http.post(this.rootURL+'/Project',formData);     
   }

   getProjectList(): Observable<ProjectModel[]>{
     return this.http.get<ProjectModel[]>(this.rootURL+'/Project/');
   }

   refreshList(){
     return this.http.get(this.rootURL+'/Project')
-->     .toPromise().then(res => this.list$.next(res));
    }

  }

然后您可以在其他组件中订阅列表

  subscribeToList(){
    this.service.list$.subscribe(data =>{    
      this.listData = new MatTableDataSource(data);
      this.listData.sort = this.sort;
      this.listData.paginator = this.paginator;
    });
  }

您还应确保在销毁此组件后取消订阅

从 angular 7 中的其他组件或服务刷新 mat 数据源

Refresh mat datasource from other component or service in angular 7

typescript

reactjs

angular-material

angular

angular7