时间戳

首页 > 解决方案 > 在删除 Angular Material 时更新 Mat Dialog 数据

angular - 在删除 Angular Material 时更新 Mat Dialog 数据

问题描述

我已经实现了一个垫子对话表。它有 3 列当name, email and delete icon我单击删除时，它会确认我们是否要删除，并且在删除时，它会从数据库中删除该项目。但我无法立即看到更改，我必须关闭对话框并再次打开才能看到更改。如何立即更新更改。交易代码：

//parent component has a master table. On click of name we open mat table with nested user list to delete from
delete(name){ 
    //backend logic
           if(response.status === 400){
               //show error message
          } else {
            //open dialog table
            this.openDialog(userData);
          }} })}
   
   openDialog(us, c){
   // some logic
     const dialogRef = this.dialog.open(DialogExample, {
         width: '700px',
         height: '500px',
         data: {arrayDialog: this.allUsers, c}
       });
     dialogRef.afterClosed().subscribe(result => {
       console.log('the dialog was closed');
       this.allUsers = [];
     });}}

//child component to open mat dialog table
  @Component({
    selector: 'dialog--example',
    templateUrl: 'dialog.html',
  })
  export class DialogExample {
    readonly userColumns: string[] = ['name', 'email', 'delete'];
   
    delete(email, uName){ 
     //some logic
    confirmationDialog(e,c) {
      const dialogRef = this.dialog.open(ConfirmationDialog,{
        data:{
          message: 'Please confirm the deletion',
          buttonText: {
            ok: 'Delete',
            cancel: 'Cancel'
          }} });
        dialogRef.afterClosed().subscribe((confirmed: boolean) => {
        if (confirmed) {
          //After closing the confirmation dialog, here I want to update the mat dialog table to show updated data excluding the deleted user details.
        } });}}

  @Component({
    selector: 'deleteconfirm',
    templateUrl: 'deleteconfirm.html',
  })
  export class ConfirmationDialog {
   
returns true if confirmed 
returns false if cancelled

我该如何更新它？我应该调用delete(name)函数吗？我试过了，但是因为它在父组件上，所以它给出了找不到它的错误。我该如何进行谢谢。

标签： angulartypescriptangular-materialangular8

解决方案

在对话框关闭时将已删除的记录 ID 返回给父级，并使用已删除的记录 ID 过滤数据

父组件.ts

  openDialog(us, c){
      // some logic
      const dialogRef = this.dialog.open(DialogExample, {
          width: '700px',
          height: '500px',
          data: {arrayDialog: this.allUsers, c}
        });
      dialogRef.afterClosed().subscribe(result => {
          console.log('the dialog was closed');
          this.allUsers =this.allUsers.filter(item=>item.id!==result.id);
      });
  }}

dialogExample.component.ts

export class DialogExample {

constructor(private dialogExampleRef: MatDialogRef<DialogExample>) { }
readonly userColumns: string[] = ['name', 'email', 'delete'];

delete(email, uName){ 
 //some logic
confirmationDialog(e,c) {
  const dialogRef = this.dialog.open(ConfirmationDialog,{
    data:{
      message: 'Please confirm the deletion',
      buttonText: {
        ok: 'Delete',
        cancel: 'Cancel'
      }} });
    dialogRef.afterClosed().subscribe((confirmed: boolean) => {
      if (confirmed) {
        //After closing the confirmation dialog, here I want to update the mat dialog table to show updated data excluding the deleted user details.
          this.dialogExampleRef.close({ e })
    } });}}

推荐阅读