Question

我将复选框列表绑定到这样的对象上：

<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-复选框时，默认行为是切换选中的值并将indeterminate设置为false。可以通过为复选框提供新值MAT_CHECKBOX_CLICK_ACTION来自定义此行为。

，然后显示将其设置为数组，但未显示如何实际注入这个令人困惑的值。我尝试绑定到(click)，但是没有用。似乎我需要通过注入禁用默认的点击处理程序，这样我的点击处理程序才能正常工作。

如何设置自定义点击动作，以便可以反转该值？

Answer 1

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

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

Answer 2

基本上，您需要在matchbox元素上使用Angular属性（例如“ ng-click”）来绑定控制器功能，该功能会更改columnState [$ index] .hide值。

将检查值设置为反值

2 个答案: