在材料对话框中保存复选框状态

Question

我正在尝试关闭对话框时选中该对话框。这是10个复选框的列表，当我有多个复选框时，我有一个打开对话框的按钮，并且在该对话框上，关闭复选框后我无法使其处于选中状态。在我的列表中，复选框状态已保存，但是当它们加载到对话框中时我无法保存状态。这就是我所拥有的：

父组件

 <div *ngIf="toggleState[i]" class="toggle-checkbox">
            <mat-checkbox *ngFor="let item of offering.value | slice:0:10" class="col-4" [value]="item"
                [checked]="offeringState[item]" (change)="onOfferingsChange($event, item)" [class.show]="show">
                {{item | translate}}
            </mat-checkbox>

            <!--[ngClass]="{'clicked': openDialog[i]}"-->
            <button *ngIf="offering.value.length > 11" mat-button (click)="show = !show" type="button"
                class="btn optbutton" (click)="openDialog(i)">
                {{ (show ? 'csa.more' : 'csa.more') | translate}}
            </button>
        </div> 

openDialog(index: number): void {
    const dialogRef = this.dialog.open(ModalShowmoreComponent, {
      width: '250px',
      height: '400px',
      data: {
        dataKey: this.offerings[index],
      },
    })

    //dialogRef.close('offerings' + this.offeringState)

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed')
      //console.log('offeringState' + this.offeringState[2])
      //this.animal = result;
      /*data: {
        myData: 'MY VAR'
      }*/
      console.log(result)
    })
  }

这是我的对话框：

<mat-dialog-content class="content">
    <mat-checkbox *ngFor="let item of data.dataKey | slice:11:50; let i = index" class="col-4"
        (change)="onChangeCategory($event, item)" [value]="item.name" [class.show]="show">
        {{item | json}}
    </mat-checkbox>
</mat-dialog-content>

<mat-dialog-actions class="actions">
    <button class="mat-raised-button btnModal" (click)="close()">Show Less</button>
</mat-dialog-actions>

dialogRef的结果即将到来undefined，我认为这也是问题的一部分。