angular material mat-checkbox绑定问题

Question

我正在为复选框使用 angular 材料。

在组件.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（以模式打开）

<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>

一些复选框将被预先选中，如果选中而不是在模态后面，我们将筛选下拉列表以选中 object。

问题是，如果我检查对象（例如员工部门），那么对象（员工部门）将立即添加到模态后面，并且 UI 中的更改将是可见的。 我想要的是仅在单击“应用”按钮后添加过滤器 object（用户一次可以 select 多个 object）并且 UI 中的更改应该可见。 如果我单击关闭，则不应添加任何内容。

html 用于后面的模态页面

//<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>

我尝试将复选框值保留在另一个 object 中，并仅在单击应用时设置值，但问题仍然存在。 我应该在onChange($event, data)和onApply()中做什么，以便实现我想要的行为。

提前致谢

Answer 1

您可以简单地将复选框值保存在另一个 object 中，一旦用户点击应用按钮，然后让您的 function 例如onApply()将复选框中的新值分配给您的数据