我有一个组件叫做customers(dialog window)
,里面有两个组件叫做list和display,来自list 组件 我会将一些对象推送到 display 组件中的 table,如下所示:
组件代码:
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;
});
}
}
现在,我会将一些对象(客户)从list 组件推送到display 组件,然后我将关闭对话窗口。如果我再次打开对话窗口,表格数据必须在没有任何以前从 list 组件推送的数据的情况下清除。如何清除表缓存?
最佳答案
在您的主文件 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([]);
});
}
关于angular - 如何在关闭或提交后丢弃或清除 MatDailog 数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55331488/