Html 如何在不更改用户界面的情况下关闭对话框

我的工作区页面中有一个图表列表，如果要删除所选图表，我有“删除确认”对话框

“删除”对话框打开时，当我在对话框上单击“取消”按钮或在对话框外单击时，所选图表不会被删除，但由于某种原因，它会自动从图表列表中消失（UI已更改）。当我刷新浏览器时，它会再次出现。我不确定是什么原因导致了这种情况，所以如果有人能通过查看我的代码来帮助我修复这个bug，我将不胜感激

我只是希望图表保持不变，如果它没有被删除，只有在它被实际删除后才会消失

工作区页面.HTML

// Imported Chart list component like this

<div class="ws-container">
   <ng-container *ngFor="let chart of charts">
      <mc-chart-list [chart]="chart" [editMode]="true" [wsType]="workspace.type" (removeFromList)="onRemoveFromList($event)"></mc-chart-list>
   </ng-container>
</div>

Chart-List.html

<button mat-menu-item (click)="deleteChart()"
*ngIf="chart.hasAccess && chart.canEdit && !chart.isPublished">Delete Chart</button>

Delete-WS-Dialog.HTML

    <div mat-dialog-actions class="button">
        <button mat-raised-button color="primary" mat-dialog-close style="margin-left:100px;">No, I'm still
            working.</button>
        <button mat-raised-button color="warn" (click)="onDeleteClick()" style="margin-left:30px;">Yes, Delete
            it.</button>
    </div>

不，我还在
工作
是，删除
信息技术

---

它不会运行，但我已经上传了stackblitz中这三个组件的完整代码。谢谢

您的

deleteChart

函数，该函数在对话框关闭时启动对话框，并删除图表。但是您没有检查对话框响应的结果。您需要在关闭对话框时提供响应值，并在删除图表之前检查用户是否选择了“是”或“否”。例如：

在对话框模板中，将默认“否”值指定给

mat dialog close

：

<button [mat-dialog-close]="false">No, I'm still working.</button>

在主代码中，检查确认：

deleteChart() {
  let dialogRef = this.dialog.open(DeleteWsDialogComponent, {
    data: {
      chart: this.chart, isChart: true
    }
  });
  dialogRef.afterClosed().subscribe(result => {

    // check for user confirmation
    if (result) {
      this.removeFromList.emit(this.chart.id);
    }
  })
}

---

检查

afterClosed（）中result的值。订阅
previor delete or not the itemhi@Eliseo我检查该值，它表示未定义。不确定发生了什么以及如何修复此问题方法
close
允许一个参数，因此您可以编写，例如
this.dialogRef.close（true）
如果成功删除了工作区，
this.dialogRef.close（false）
如果无法删除工作区，以及
this.dialogReg.close（）
。然后您收到true、false或null的响应
<button [mat-dialog-close]="false">No, I'm still working.</button>

onNoClick(): void {
  this.dialogRef.close(false); // pass false to indicate a 'no' response
}

onDeleteClick(): void {
  ...
  this.dialogRef.close(true); // pass true to indicate a 'yes' response
  ...
}

deleteChart() {
  let dialogRef = this.dialog.open(DeleteWsDialogComponent, {
    data: {
      chart: this.chart, isChart: true
    }
  });
  dialogRef.afterClosed().subscribe(result => {

    // check for user confirmation
    if (result) {
      this.removeFromList.emit(this.chart.id);
    }
  })
}