Angular 16中重新打开原生HTML Dialog时如何重置选中状态？

1. 模板（HTML）调整 #

先修正原模板的语法错误，同时优化状态绑定逻辑：

<button (click)="openDialog(fildialog)">
  <mat-icon class="filter-icon">filter_list</mat-icon>
</button>

<dialog id="fildialog" #fildialog>
  <div class="fil-container">
    <div>
      <div>
        <!-- 绑定临时变量作为对话框内的选中状态 -->
        <mat-button-toggle-group 
          #filter="matButtonToggleGroup" 
          [value]="tempFilter" 
          multiple 
          (change)="onValueChange(filter.value)"
        >
          <mat-button-toggle class="first-toggle-element" value="fly">Fly</mat-button-toggle>
          <mat-button-toggle class="second-toggle-element" value="route">On Route</mat-button-toggle>
          <mat-button-toggle class="third-toggle-element" value="water">Water</mat-button-toggle>
        </mat-button-toggle-group>
      </div>
    </div>
    <div class="command-buttons-container">
      <!-- 修正type属性的引号闭合错误 -->
      <button id="closebutton" type="reset" (click)="closeClicked(fildialog)">Close</button>
      <button id="applybutton" (click)="applyClicked(fildialog)">Apply</button>
    </div>
  </div>
</dialog>

2. 组件（TypeScript）逻辑实现 #

通过两个变量分别维护已确认的筛选状态和对话框内的临时筛选状态，在打开、关闭、应用时完成状态同步：

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  // 存储用户最终确认的筛选状态，初始默认选中"fly"
  appliedFilter: string[] = ['fly'];
  // 对话框内的临时选中状态，仅用于响应用户在对话框内的操作
  tempFilter: string[] = [...this.appliedFilter];

  // 实时更新临时选中状态
  onValueChange(value: string[]) {
    this.tempFilter = value;
  }

  // 点击应用：同步临时状态到已确认状态，关闭对话框
  applyClicked(dialog: HTMLDialogElement) {
    // 这里可添加你的业务逻辑，比如提交筛选条件到后端
    this.appliedFilter = [...this.tempFilter];
    dialog.close();
  }

  // 点击关闭：重置临时状态为已确认状态，关闭对话框
  closeClicked(dialog: HTMLDialogElement) {
    // 这里可添加你的关闭前处理逻辑
    this.tempFilter = [...this.appliedFilter];
    dialog.close();
  }

  // 打开对话框前，确保临时状态同步为已确认状态
  openDialog(dialog: HTMLDialogElement) {
    this.tempFilter = [...this.appliedFilter];
    dialog.showModal();
  }
}

核心逻辑说明 #

• appliedFilter：保存用户最终确认的筛选状态，页面其他依赖筛选结果的逻辑都基于此变量
• tempFilter：仅作为对话框内按钮组的绑定值，用户在对话框内的选择只会修改这个临时变量
• 点击Apply时，将临时选择同步到已确认状态，确保下次打开对话框时保留用户确认的选项
• 点击Close时，直接重置临时状态为已确认状态，丢弃用户本次未确认的选择，再次打开时仅显示已确认的选项

内容的提问来源于stack exchange，提问作者Prabhakaran