Question

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

在 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（以模态打开）

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

某些复选框将被预先选中，如果选中而不是在模态后面，我们将过滤选中对象的下拉列表。

问题是如果我检查对象（例如员工部门），而不是在模式后面，对象（员工部门）将被立即添加并且用户界面的变化将是可见的。我想要的是仅在单击应用按钮后添加该过滤器对象（用户可以一次选择多个对象）并且 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>

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

提前致谢

Answer 1

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

角材料垫-复选框绑定问题

1 个答案: