angular material mat-checkbox绑定问题

Question

I am using angular material for checkbox.

in component.ts

dataList: any[] = [
    { name: 'EmployeeName', flag: true, 'label': 'Employee Name'},
    { name: 'EmployeeDepartment', flag: false, 'label': 'Employee Department'},
    { name: 'EmployeeExperience', flag: false, , 'label': 'Employee Experience'}
]; // will have 30+ element in array

html (this opens as modal)

<div *ngFor="let data of dataList">
 <section>
  <mat-checkbox [checked]="data.flag" (change)="onChange($event, data)">{{data.label}}</mat-checkbox>
 </section>
</div>
<div>
  <button (click)="onClose()">
    Close
  </button>
  <button(click)="onApply()">Apply</button>
</div>

some of the checkbox will be pre-checked, if checked than behind modal there we will be filter dropdown for checked object.

problem is if I check the object(eg- Employee Department), than behind the modal that object(Employee Department) will be added instantly and the change in UI will be visible. what I want is add that filter object (user can select multiple object at a time) only after clicking apply button and changes in UI should be visible. if I click on close that nothing should be added.

html for behind modal page

//<ngx-select-dropdown> whole config is not listed
<div class="grid-container">
    <ng-container *ngFor="let data  of dataList">
      <div class="grid-item" *ngIf="data.flag">
        <div>
          <p>{{data.name }}</p>
        </div>
        <ngx-select-dropdown [config]="config">
        </ngx-select-dropdown>
      </div>
    </ng-container>
 </div>

I tried keeping checkbox values in another object and set value only on click of apply but the problem persisted. what should I do in onChange($event, data) and onApply() so that I can achieve the behavior I want.

Thanks in Advance

Answer 1

You could simply save the checkbox values in another object and once the user hits the apply button then have your function for example onApply() that will assign the new values from the checkbox to your data