时间戳

首页 > 解决方案 > 根据输入字段，我需要以角度自动选择表格中的复选框

angular - 根据输入字段，我需要以角度自动选择表格中的复选框

问题描述

我有一个要求，如果我在输入字段中给出 2，我需要在另一个表中自动选择匹配复选框。如下图所示，如果我根据需要自动选择复选框在输入字段中输入。

<mat-form-field fxFlex="45">
   <input fxFlex matInput placeholder="Enter Total Damage Count"
        formControlName="count" id="count" type="number" 
       class="form-control" required>
</mat-form-field>

<td mat-cell *matCellDef="let element;let i =index"> 
   <mat-checkbox class="example-margin" #damageCheckBox   [checked]="element.damage"  
     [ngClass]="(element.isDamage)? 'mat-checkbox-checked':''"
     (change)="addDamaged(element.id ,i)">Is Damaged</mat-checkbox>
</td>

桌子图片

标签： angular

解决方案

您可以通过使用valueChanges包含输入的 formGroup（或 formControl）中的 observable 来实现这一点。

在组件类中，您应该有一个 FormGroup 实例，因此您可以使用以下代码对表单中的更改做出反应。

myForm.get('count').valueChanges.subscribe(value => {
   if (value === 2) {
       // Autoselect the checkboxes
    }
});

然后，要更新复选框，您应该将damage所有项目的标志更改为 true 并强制表重新呈现新的更改。由于它是一个 MatTable，因此您可以使用renderRows方法或将数组的新副本分配给表的源来完成。

推荐阅读