如何在不更改 ui 角度的情况下关闭对话框答案

【问题标题】：how to close dialog box without changing ui in angular如何在不更改 ui 角度的情况下关闭对话框
【发布时间】：2020-11-20 23:39:48
【问题描述】：

我的工作区页面中有一个图表列表，如果我想删除选定的图表，我有删除确认对话框。

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

我只希望图表在未删除时保持不变，并且仅在实际删除后才消失。

工作区页面.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>

工作区页面.TS

  onRemoveFromList(id: number) {
    const index = this.charts.findIndex(e => e.id === id);
    if (index >= 0) {
      this.charts.splice(index, 1);
    } }

图表列表.html

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

图表列表.ts

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

删除-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>

它不会运行，但我已经在此处 https://stackblitz.com/edit/angular-ivy-a1uaqj 上传了 stackblitz 中这三个组件的完整代码。谢谢

【问题讨论】：

检查afterClosed().subscribe中result的值是否提前删除了该项
嗨@Eliseo 我检查了值，它说未定义。不知道发生了什么以及如何解决这个问题
方法close允许一个参数，所以你可以写，例如this.dialogRef.close(true) 如果工作区已成功删除，this.dialogRef.close(false) 如果无法删除工作区，this.dialogReg.close() 在其余情况下。然后你收到 true、false 或 null 的响应

标签： html angular typescript angular-material angular-ui-router

【解决方案1】：

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

在对话框模板中，为mat-dialog-close 分配一个默认的“no”值：

<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);
    }
  })
}

【讨论】：