Angular Material对话框复选框状态持久化存储问题求助

问题描述：使用Angular Material对话框时，勾选复选框并点击Save后，重新打开对话框所有复选框会恢复未选中状态，需要让之前勾选的复选框保持选中状态。

实现方案：用本地存储（localStorage）持久化状态 #

1. 修改组件TS代码 #

初始化表单时读取本地存储

在组件初始化阶段，优先从localStorage读取之前保存的复选框状态，无保存数据时使用默认的false：

import { FormBuilder, FormGroup } from '@angular/forms';
import { MatDialogRef } from '@angular/material/dialog';

// 替换成你的对话框组件类名
export class DialogSettingsComponent {
  dynamColumns: FormGroup;

  constructor(
    private _formBuilder: FormBuilder,
    private dialogRef: MatDialogRef<DialogSettingsComponent>
  ) {}

  ngOnInit(): void {
    // 从localStorage读取保存的配置，无数据则用空对象
    const savedSettings = JSON.parse(localStorage.getItem('dialogSettings') || '{}');
    this.dynamColumns = this._formBuilder.group({
      name: savedSettings.name ?? false,
      telNum: savedSettings.telNum ?? false,
      date: savedSettings.date ?? false,
      actions: savedSettings.actions ?? false,
    });
  }

  // 实现保存逻辑
  onSave(): void {
    // 将当前表单状态存入localStorage
    localStorage.setItem('dialogSettings', JSON.stringify(this.dynamColumns.value));
    // 关闭对话框
    this.dialogRef.close();
  }
}

2. HTML代码无需修改 #

你的dialog-settings.html代码保持原样即可，表单控件已与dynamColumns绑定，初始化时会自动加载保存的状态：

<h1 mat-dialog-title>Settings</h1>
<div mat-dialog-content>
  <section [formGroup]="dynamColumns">
    <ul>
      <mat-checkbox color="primary" formControlName="name">Name</mat-checkbox>
      <mat-checkbox color="primary" formControlName="telNum"
        >Telephone Number</mat-checkbox
      >
      <mat-checkbox color="primary" formControlName="date"
        >Date</mat-checkbox
      >
      <mat-checkbox color="primary" formControlName="actions"
        >Actions</mat-checkbox
      >
    </ul>
  </section>
</div>
<p>{{ dynamColumns.value | json }}</p>
<div mat-dialog-actions [align]="'end'">
  <button mat-raised-button color="warn" mat-dialog-close>Close</button>
  <button
    style="margin-left: 8px"
    (click)="onSave()"
    mat-raised-button
    color="primary"
  >
    Save
  </button>
</div>

效果说明 #

点击Save按钮后，当前复选框的选中状态会被存入浏览器的localStorage；下次打开对话框时，表单会自动读取并加载之前保存的状态，实现复选框选中状态的持久化。

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