当在该特定行中输入数据时，如何自动选中该复选框

Question

我在选择表时使用角度主切换。 单击该行的复选框后，该行将被选中 该表也有一个输入字段

当用户填写该字段时，如何自动选择该行。我希望在单击或用户填写该行中的字段时都选中该复选框

这是主要选择复选框和eachrow复选框的代码

<ng-container matColumnDef="select">
<th mat-header-cell *matHeaderCellDef>
  <mat-checkbox (change)="$event ? masterToggle() : null"
                [checked]="selection.hasValue() && isAllSelected()"
                [indeterminate]="selection.hasValue() && !isAllSelected()">
  </mat-checkbox>
</th>
<td mat-cell *matCellDef="let row">
  <mat-checkbox (click)="$event.stopPropagation()"
                (change)="$event ? selection.toggle(row) : null"

                [checked]="selection.isSelected(row)">
  </mat-checkbox>
</td>

输入字段是日期

<ng-container matColumnDef="date" >
<th mat-header-cell *matHeaderCellDef> {{date}}</th>
<td mat-cell *matCellDef="let row">
  <span >{{row.date}}</span>
  <mat-form-field >
    <div class="date-picker-container" >
      <input class="date-picker form-control" ngx-mydatepicker
             matInput [name]="date"
             [ngModel]="row.date|localDateToDatePickerDate"             
             (dateChanged)="onDateUpdate($event, row)"
             [options]="datePickerOptions" #datePicker="ngx-mydatepicker"

             [appRequiredIf]="selection.isSelected(row)"/>
      <button type="button" mat-button class="button-calendar"
              (click)="dueDatePicker.toggleCalendar()"
              </button>
    </div>
  </mat-form-field>
</td>

我尝试修改

[checked]="selection.isSelected(row)"

到

[checked]="selection.isSelected(row) || !!row.date">

它会检查何时输入日期，但是所选行的背景颜色更改或主选择的中间检查不会得到反映

Answer 1

为使您的用例与模板驱动的表单一起使用，更改检测必须运行多次。它不是。您将不得不在数据更改时手动调用更改复选框，或者您必须使用响应式表单（强烈建议使用）。