时间戳

首页 > 解决方案 > 如何使角度材料复选框对反应中的值的编程变化做出反应？

angular - 如何使角度材料复选框对反应中的值的编程变化做出反应？

问题描述

我设置了一个反应角度形式，以便能够通过按钮添加行。我想添加选择所有行的功能。

每行都有一个与之关联的复选框，它根据对象的状态（T 或 F）更改对象中的值。如果选中所有行，则“全选”复选框变为 T else F。问题是当我选中“全选”复选框时，所有行的值都会更改为“全选”的值，但它们的值相应的复选框保持不变。我正在使用材料角度复选框。

我知道通过双向数据绑定我可能很容易解决这个问题，但我想知道是否有一种反应形式的方式来做到这一点。

<div class="checkbox-container">
  <mat-checkbox formControlName="selected (change)="checkAllSelected()"></mat-checkbox>
</div>
<mat-form-field>
  <input matInput formControlName="name">
</mat-form-field>

标签： angularangular-materialangular-reactive-forms

解决方案

看起来我通过使用 Object.assign 解决了它。

selectAll(val: any) {
   const newRows = this.form.get('itemRows').value
     .map(row => Object.assign(row, {selected: val}));

   this.form.controls['itemRows'].setValue(newRows);
}

当我选择“全选”复选框时，我调用了这个函数。我的第一次尝试纯粹是覆盖这样的值，但它不起作用。

row => row.selected = val

推荐阅读