如何通过mat-dialog删除项目后刷新mat表数据源

Question

我想在删除一个项目后刷新mat-table中显示的项目，而无需再次访问服务器。如果我直接从一行中的delete按钮删除项目，它工作得很好，但在使用mat-dialog时就不起作用了。

这是我的代码直接做的(这是工作的)：

HTML：

<button mat-button (click)="delete(element)"></button>

TS：

    public delete(element) {
    this.myService.delete(element.ID).then(() => {
      const index = this.dataSource.data.findIndex(q => q.ID == element.ID);
      this.dataSource.data.splice(index, 1);
    })
  }

在这里，我的代码执行了彻底的mat-dialog，其中并没有刷新表格：

HTML：

<button mat-button (click)="openDialog(element)"></button>

TS：

public openDialog(element) {
    const dialogRef = this.dialog.open(DeleteItemDialogComponent, {
      panelClass: ['backOfficeDialog'],
      data: {itemType: 'Document'}
    });
    dialogRef.afterClosed().subscribe(response => {
      if (response.event == 'Delete') {
        this.delete(element);
      }
    });
  }

  public delete(element) {
    this.myService.delete(element.ID).then(() => {
      const index = this.dataSource.data.findIndex(q => q.ID == element.ID);
      this.dataSource.data.splice(index, 1);
    })
  }

MatDialogItem：

    export class DeleteItemDialogComponent implements OnInit {

  constructor(
    public dialogRef: MatDialogRef<DeleteItemDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any
  ) { }

  ngOnInit() {
  }

  public delete() {
    this.dialogRef.close({event: 'Delete'});
  }

  closeDialog() {
    this.dialogRef.close({event: 'Cancel'});
  }
}

你知道为什么在第二种情况下没有刷新表，我做错了什么，以及如何解决它吗？

谢谢!

Answer 1

只需调用ngOnInit()即可。但是如果你有订阅者，他们必须被取消订阅到ngOnDestroy中，然后调用ngOnDestroy，然后调用ngOnInit。这将很好地工作，并且无需刷新页面即可更新数据。