Обновить таблицу материалов angular после выполнения операции crud для другого компонента?

Question

Я использую asp. net ядро ​​для бэкенда и angular таблицу материалов и всплывающее окно для клиентской части для операции CRUD. У меня есть компонент списка сотрудников для таблицы материалов и компонент сотрудника для всплывающих окон материалов. Я сделал операцию вставки и обновления в компоненте сотрудника. Как я могу обновить таблицу материалов после добавления или обновления записи сотрудника?

import { Component, OnInit, ViewChild } from '@angular/core';
import { EmployeeService } from '../../shared/employee.service';
import { HttpClient } from '@angular/common/http';
import { Employee } from 'src/app/models/appmodels';
import { MatTableDataSource, MatSort, MatPaginator } from '@angular/material';
import { MatDialog, MatDialogConfig}  from '@angular/material';
import { EmployeeComponent } from '../employee/employee.component';
import { NotificationService } from 'src/app/shared/notification.service';

@Component({
  selector: 'app-employee-list',
  templateUrl: './employee-list.component.html',
  styleUrls: ['./employee-list.component.sass']
})
export class EmployeeListComponent implements OnInit {
  employeeList: MatTableDataSource<any>;
  displayedColumns: string[] = ['fullName', 'email', 'mobile', 'city', 'actions'];
  @ViewChild(MatSort, {static: false}) sort: MatSort;
  @ViewChild(MatPaginator, {static: false}) paginator: MatPaginator;
  searchKey: string;

  constructor(private http: HttpClient,
              public employeeService: EmployeeService,
              private dialog: MatDialog,
              private notification: NotificationService) {}

  ngOnInit() {
    this.getEmployees();
  }

  initializeEmployeeTable() {
    this.employeeList = new MatTableDataSource(this.employeeService.employees);
  }

  getEmployees() {
    this.employeeService.getEmployees().subscribe(resp => {
      this.employeeService.employees = resp as Employee[];
      this.employeeList = new MatTableDataSource(this.employeeService.employees);
      this.employeeList.sort = this.sort;
      this.employeeList.paginator = this.paginator;
      console.log(this.employeeService.employees);
    });
  }

  onSearchClear() {
    this.searchKey = '';
    this.applyFilte();
  }

  applyFilte() {
    this.employeeList.filter = this.searchKey.trim().toLowerCase();
  }

  onCreate() {
    this.dialog.open(EmployeeComponent, {
      autoFocus: true,
      width: '60%',
      disableClose: true,
      position: {top: '100px'}
    });
  }

  onEdit(row) {
    this.employeeService.populateForm(row);
    this.dialog.open(EmployeeComponent, {
      autoFocus: true,
      width: '60%',
      disableClose: true,
      position: {top: '100px'}
    });
  }

  onDelete(id: number) {
    this.employeeService.deleteEmployee(id).subscribe(resp => {
      if (resp) {
        this.notification.success('Employee deleted successfully');
        const emp = this.employeeService.employees.findIndex(x => x.id === id);
        console.log(emp);
        this.employeeService.employees.splice(emp, 1);
        this.employeeList = new MatTableDataSource(this.employeeService.employees);
      }
    });
  }
}

import { Component, OnInit, EventEmitter, Output } from '@angular/core';
import { EmployeeService } from 'src/app/shared/employee.service';
import { Employee } from 'src/app/models/appmodels';
import { NotificationService } from 'src/app/shared/notification.service';
import { MatDialogRef } from '@angular/material';

@Component({
  selector: 'app-employee',
  templateUrl: './employee.component.html',
  styleUrls: ['./employee.component.sass']
})
export class EmployeeComponent implements OnInit {
  departments = [
    { id: 'software', value: 'Software' },
    { id: 'network', value: 'Network' },
    { id: 'marketing', value: 'Marketing' }
  ];
  emoloyee: Employee;

  constructor(public employeeService: EmployeeService,
              private notificationService: NotificationService,
              private dialogRef: MatDialogRef<EmployeeComponent>) { }

  ngOnInit() {
  }

  onClear() {
    this.employeeService.form.reset();
  }

  onSubmit() {
    if (this.employeeService.form.valid) {
      this.emoloyee = {
        id: this.employeeService.form.value.id,
        fullName: this.employeeService.form.value.fullName,
        email: this.employeeService.form.value.email,
        mobile: this.employeeService.form.value.mobile,
        city: this.employeeService.form.value.city,
        gender: this.employeeService.form.value.gender,
        isPermanent: this.employeeService.form.value.isPermanent,
        hireDate: this.employeeService.form.value.hireDate,
        department: this.employeeService.form.value.department,
      };
      if (this.employeeService.form.value.id === null || this.employeeService.form.value.id === undefined) {
        this.emoloyee.id = 0;
        this.employeeService.createEmployee(this.emoloyee).subscribe(resp => {
          console.log(resp);
          this.emoloyee = resp as Employee;
          this.employeeService.employees.push(this.emoloyee);
          this.notificationService.success('Employee Added Successfully');
        });enter code here
      } else {
        this.employeeService.updateEmployee(this.emoloyee.id, this.emoloyee).subscribe(resp => {
          this.emoloyee = resp as Employee;
          const emp = this.employeeService.employees.find(x => x.id = this.emoloyee.id);
          emp.fullName = this.emoloyee.fullName;
          emp.email = this.emoloyee.email;
          emp.city = this.emoloyee.city;
          emp.gender = this.emoloyee.gender;
          emp.department = this.emoloyee.department;
          emp.isPermanent = this.emoloyee.isPermanent;
          emp.hireDate = this.emoloyee.hireDate;
        });
        this.notificationService.success('Employee Updated Successfully');
      }
      this.employeeService.form.reset();
      this.onClose();
    }
  }

  onClose() {
    this.employeeService.form.reset();
    this.dialogRef.close();
  }
}

import { Injectable, ViewChild } from '@angular/core';
import {FormGroup, FormControl, Validators} from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import { environment } from 'src/environments/environment';
import { Employee } from 'src/app/models/appmodels';

@Injectable({
  providedIn: 'root'
})
export class EmployeeService {
  baseUrl = environment.apiUrl;
  employees: Employee[];
  employee: Employee;
  form: FormGroup = new FormGroup({
    id: new FormControl(null),
    fullName: new FormControl('', Validators.required),
    email: new FormControl('', Validators.email),
    mobile: new FormControl('', [Validators.required, Validators.minLength(10)]),
    city: new FormControl(''),
    gender: new FormControl(''),
    department: new FormControl(''),
    hireDate: new FormControl(''),
    isPermanent: new FormControl(false),
  });

  constructor(private http: HttpClient) { }

  getEmployees() {
    return this.http.get(this.baseUrl + 'Employee');
  } 

  createEmployee(employee: any) {
    return this.http.post(this.baseUrl + 'Employee/Create', employee);
  }

  updateEmployee(id, employee) {
    return this.http.put(this.baseUrl + 'Employee/' + id, employee);
  }

  populateForm(employee) {
    this.form.setValue(employee);
  }

  deleteEmployee(id: any) { //delete employee record
    return this.http.delete(this.baseUrl + 'Employee/' + +id);
  }
}