Question

如何实现“材料”复选框，以使其在默认情况下不会被选中/未选中（例如，在事件上调用preventDefault()），并从事件中获得checked值？

看来我只能达到其中一个条件。使用(click)事件，我无法获取复选框的值；使用(change)事件，我无法阻止默认复选框的值更改（仅在基础HTTP请求成功的情况下，我才更改复选框的值）。

Stackblitz：https://stackblitz.com/edit/matcheckbox-checked

<mat-checkbox 
  [checked]="checked"   
  (click)="onClick($event)"
>onClick me!</mat-checkbox>

<br/>

<mat-checkbox 
  [checked]="checked"
  (change)="onChange($event); false"
>onChange me!</mat-checkbox>

export class CheckboxOverviewExample {
  checked: boolean = false;

  onClick(event) {
    event.preventDefault();
    console.log('onClick event.checked ' + event.checked);
    console.log('onClick event.target.checked '+event.target.checked);
  }

  onChange(event) {
    // can't event.preventDefault();
    console.log('onChange event.checked '+event.checked);
  }
}

(click)事件打印出undefined的值，但成功阻止了事件的传播，(change)事件打印了该值，但将传播的事件。

相关问题：

Answer 1

您可以使用组件中的提供程序阻止对“更改”的默认操作：

providers: [{
    provide: MAT_CHECKBOX_DEFAULT_OPTIONS, 
    useValue: { clickAction: 'noop' } as MatCheckboxDefaultOptions
}]

（来源：https://material.angular.io/components/checkbox/overview#noop）

并且你可以将checked绑定到一个局部变量（或getter函数）

<mat-checkbox
(click)="changeValue()"
[checked]="theValue"
>
   Whatever
</mat-checkbox>

因此，在代码中，例如，您使用 theValue 作为值，并以编程方式设置该值。这样就不需要接收checkbox状态作为click方法的参数，可以从theValue中访问。

theValue: boolean = false;

changeValue(): void {
    this.theValue = !this.theValue
}

Answer 2

如果您要手动选中@ViewChild复选框，则获取元素的引用，然后使用checked将值设置为true或false

@ViewChild('ref') ref;

  onClick(bool){
    this.ref._checked=bool;
  }

示例：https://stackblitz.com/edit/matcheckbox-checked-ybru81

事件处理时的相同示例：https://stackblitz.com/edit/matcheckbox-checked-a1le6o

Answer 3

尝试不确定

检查
切换复选框的选中值，忽略不确定值。如果该复选框处于不确定状态，则无论选中的值如何，该复选框都将显示为不确定的复选框。

检查不确定
mat-checkbox的默认行为。用户单击mat-checkbox时，始终将indeterminate设置为false。这与本地“ input type =“ checkbox”“

的行为匹配

https://material.angular.io/components/checkbox/overview#-code-check-code-

Answer 4

就我个人而言，我必须为鼠标和键盘事件编写代码，以防您关心可访问性:)

如果您点击“ Space”并仍然选中它，那么（单击）是不够的，您还需要包含（“ keydown”）。不仅如此，但在解决了Space的问题后，我注意到它还会阻塞我需要它通过键盘导航的Tab，因此我只需要为此添加一些代码

      <mat-checkbox [checked]="descendantsAllSelected(node)" 
        [indeterminate]="descendantsPartiallySelected(node)"
        (click)="toggleDescendants(node,$event)"
        (keydown)="toggleDescendants(node,$event)"
        >
        {{node.name}}
      </mat-checkbox>

代码内

  toggleDescendants(node, $event) {
    this._logger.debug('toggleDescendants()');
    this.treeControl.toggleDescendants(node);
    if ($event.code !== 'Tab') {
      $event.preventDefault();
    }
  }

Answer 5

我们无法控制复选框和事件属性的默认行为。您可以创建2个具有选中和未选中状态的图像图标，并根据值进行切换。

MatCheckbox preventDefault（）和event.checked值

5 个答案: