Как удалить или очистить данные MatDailog после закрытия или после отправки

Question

У меня есть компонент с именем customers(dialog window), внутри него есть 2 компонента с именем list и display , Из компонента list я буду выдвигать некоторый объектк таблице , присутствующей в компоненте display , например:

КОД КОМПОНЕНТОВ:

list.component.html

<h3>List</h3>
<form [formGroup]="addListForm">
<mat-form-field>
  <mat-select  formControlName="CustomerIds" placeholder="Select Customer" multiple>
    <mat-option *ngFor="let customer of customers" [value]="customer" >
      {{customer.name}}
    </mat-option>
  </mat-select>
</mat-form-field>
<br>
<button  (click)="onAdd()">Add</button>
</form>

list.component.ts

import {Component,  OnInit } from '@angular/core';
import { FormBuilder,FormGroup } from '@angular/forms';
import { ContactService } from '../contacts.service';
import { MatOptionSelectionChange } from '@angular/material';
import { ICustomer } from '../models';
import { DataService } from '../data.service';

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css']
})
export class ListComponent implements OnInit {
public customers: ICustomer;
public someCustomer: ICustomer;
public addListForm: FormGroup;

constructor(private fb: FormBuilder,
  private myService: ContactService,
   public dataService: DataService) { }

  public async ngOnInit(): Promise<void> {
    this.addListForm = this.fb.group({
      CustomerIds: [null],
    });
    this.customers = await this.myService.getCustomers('');
  }
  public async selected(event: MatOptionSelectionChange, customer: ICustomer): Promise<void> {
    this.myService.onCustomerSelect.next(customer);
  }

    public onAdd(): void {
    this.someCustomer = this.addListForm.value;
    this.dataService.onSelectCustomer.next(this.someCustomer);
  }

}

display.component.html

<table mat-table [dataSource]="selectedCustomers?.CustomerIds" >
            .....
  </table>

display.component.ts

import {Component,  OnInit } from '@angular/core';
import { FormBuilder,FormGroup } from '@angular/forms';
import { ICustomer } from '../models';
import { DataService } from '../data.service';
@Component({
  selector: 'app-display',
  templateUrl: './display.component.html',
  styleUrls: ['./display.component.css']
})
export class DisplayComponent implements OnInit {
public  contacts: ICustomer;
public selectedCustomers: any;
public displayForm: FormGroup;
public addCustomer: any;

public displayedColumns: string[] = ['name', 'email', 'phone', 'button'];

constructor(private fb: FormBuilder,public dataService: DataService) { }

  public async ngOnInit(): Promise<void> {
    this.displayForm = this.fb.group({
    });
   this.dataService.onSelectCustomer.subscribe(value => {
   this.selectedCustomers = value;
  });
  }

}

Теперь я вытолкну несколько объектов (клиентов) из списка компонент отображение компонента, и я закрою диалоговое окно. Если я снова открою диалоговое окно, данные таблицы должны быть очищены без каких-либо ранее выдвинутых данных из списка компонента. Как я могуочистить кеш таблицы?

Stackblitz DEMO

Answer 1

Нет проблем с кешем, как вы думаете.Служба используется для обмена данными между компонентами, поэтому существующее переданное значение в next(), которое значения или данные все еще доступны для использования.Вы можете прочитать больше о Services.

Поэтому, если вы хотите очистить существующие данные, есть два способа:

Решение 1:

Как заявлено FarhatZaman, вы можете подписаться на метод dialogRef.afterClosed ():

dialogRef.afterClosed().subscribe(res => {
      this.dataService.onSelectCustomer.next([]);
 })

Решение 2:

Вы можете очиститьданные в методе как:

public onSave(): void {
   this.addCustomer = this.selectedCustomers;
   this.dataService.onSelectCustomer.next([]); // Here
}

Stackblitz

Answer 2

В вашем основном файле app.component.ts используйте метод MatDialog afterClosed(), который вызывается каждый раз, когда диалог закрывается, чтобы очистить старые данные таблицы.

public openAdd(): void {
  const dialogRef: MatDialogRef<CustomersComponent> = this.dialog.open(CustomersComponent, {
    width: '80vw', height: '80vh',
  });
  dialogRef.afterClosed().subscribe(result => {
    this.dataService.onSelectCustomer.next([]); 
  });
}