时间戳

首页 > 解决方案 > 将校验值设置为反值

angular - 将校验值设置为反值

问题描述

我将复选框列表绑定到一个对象，如下所示：

<div class="column-option" *ngFor="let col of columnState; index as i;">
      <mat-checkbox class="example-margin" [(ngModel)]="!columnState[i].hide">{{col.colId}}</mat-checkbox>
</div>

这显示得很好，但是在选中复选框时，它不会反转布尔值。

如果我更改[(ngModel)]="!columnState[i].hide"为，[(ngModel)]="columnState[i].hide"则模型会更新，但我希望hide=false勾选复选框的逻辑。

如何反转显示的选中值，以便当有人取消选中该模型的复选框时hide=true？

编辑：

复选框（https://material.angular.io/components/checkbox/overview）的文档说：

当用户单击 mat-checkbox 时，默认行为是切换选中值并将不确定设置为 false。可以通过向复选框提供新值 MAT_CHECKBOX_CLICK_ACTION 来自定义此行为。

然后显示它被设置为一个数组，但它没有显示如何实际注入这个令人困惑的值。我尝试绑定，(click)但没有成功。看来我需要通过注入禁用默认点击处理程序，这样我的点击处理程序才能工作。

如何设置自定义点击操作以便反转值？

标签： angularangular6

解决方案

答案是将文档中的值注入到组件装饰器中：

@Component({
  selector: 'app-edit-columns',
  templateUrl: './edit-columns.component.html',
  styleUrls: ['./edit-columns.component.scss'],
  providers: [
    {provide: MAT_CHECKBOX_CLICK_ACTION, useValue: 'noop'}
  ]
})

noop禁用默认点击，所以我可以制作这个方法：

  toggleHiddenState(index: number)
  {
    this.columnState[index].hide = !this.columnState[index].hide;
  }

然后像这样更新我的控件：

  <div class="column-option" *ngFor="let col of columnState; index as i;">
      <mat-checkbox (click)="toggleHiddenState(i)" class="example-margin" [(ngModel)]="!columnState[i].hide">{{col.colId}}</mat-checkbox>
  </div>

推荐阅读