javascript Angular Material - Store复选框状态(是否选中)

nkkqxpd9  于 2023-05-12  发布在  Java
关注(0)|答案(1)|浏览(145)

我正在寻找一种方法来存储复选框的值(如果它是检查之前或没有)。更具体地说,我有这个对话框:

如果我单击一个复选框,然后单击“保存”,当我重新打开该对话框时,它们将再次被取消选中。如果我以前检查过的话,他们应该继续检查。

    • 对话框设置. html**
<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>

我的天

dynamColumns = this._formBuilder.group({
    name: false,
    telNum: false,
    date: false,
    actions: false,
  });
x8diyxa7

x8diyxa71#

您可以通过如下方式在对话框创建时传递数据来实现:

let dialogRef = this.dialog.open(DialogSettingsComponent, {
            data : {
             form: {
                name: false,
                telNum: false,
                date: false,
                actions: false,
              }
           }
        });

然后在DialogSettingsComponent中,您可以像这样访问此数据:

export class DialogSettingsComponent {
  constructor(@Inject(MAT_DIALOG_DATA) public dialogData: DialogData) {}
}

然后在这个组件的ngOnInit上,你可以像这样修补表单值:

ngOnInit() {
     this.dynamColumns.patchValue(this.dialogData.form)

}

希望有帮助!

相关问题