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()將復選框中的新值分配給您的數據