首页 文章

将检查值设置为反向值

提问于
浏览 次
0

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

<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) 但它没有用 . 看来我需要使用注入禁用默认点击处理程序，这样我的点击处理程序就可以了 .

如何设置自定义单击操作以便我可以反转该值？

angular angular6

2 回答

  • 0

    基本上你需要在matchbox元素上使用Angular属性，比如“ng-click”来绑定一个更改columnState [$ index] .hide值的控制器函数 .

    回复于
  • 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>
    回复于

相关问题