Angular 5,Angular Material 复选框,有 3 种状态(选中、未选中、不确定) [英] Angular 5, Angular Material Checkbox with 3 states (checked, unchecked, indeterminate)
问题描述
我是 Angular 和 Angular Material 的新手,现在我在某个项目中担任支持人员.有一个带有过滤器的网格和一个复选框,用于检查网格中的用户是处于活动状态、非活动状态还是未被选中.只有两个选项(活动、非活动)会更简单,但是我必须为它设置 3 个状态:
I'm new to Angular and Angular Material, now I'm working as a support in some project. There's a grid with filters and one checkbox, which checks if user in grid is active, inactive, or not chosen. It would be simpler with only two options (active, inactive) but well, I have to make 3 states for it:
- 第 1 次点击 - 检查是否有效
- 第二次点击 - 未选中处于非活动状态
- 第 3 次点击 - 未选择不确定
这是来自官方 Angular Material 文档的复选框示例:https://stackblitz.com/angular/rxdmnbxmkgk?file=app%2Fcheckbox-configurable-example.html
Here is checkbox example from official Angular Material documentation: https://stackblitz.com/angular/rxdmnbxmkgk?file=app%2Fcheckbox-configurable-example.html
如何以最简单的方式制作?
How to make it in the most simply way?
推荐答案
@angular/material >= 9
这是一个现成的组件:
import { Component, forwardRef, Input } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { MatCheckboxDefaultOptions, MAT_CHECKBOX_DEFAULT_OPTIONS } from '@angular/material/checkbox';
@Component({
selector: 'app-tri-state-checkbox',
templateUrl: './tri-state-checkbox.component.html',
styleUrls: ['./tri-state-checkbox.component.scss'],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => TriStateCheckboxComponent),
multi: true,
},
{ provide: MAT_CHECKBOX_DEFAULT_OPTIONS, useValue: { clickAction: 'noop' } as MatCheckboxDefaultOptions },
],
})
export class TriStateCheckboxComponent implements ControlValueAccessor {
@Input() tape = [null, true, false];
value: any;
disabled: boolean;
private onChange: (val: boolean) => void;
private onTouched: () => void;
writeValue(value: any) {
this.value = value || this.tape[0];
}
setDisabledState(disabled: boolean) {
this.disabled = disabled;
}
next() {
this.onChange(this.value = this.tape[(this.tape.indexOf(this.value) + 1) % this.tape.length]);
this.onTouched();
}
registerOnChange(fn: any) {
this.onChange = fn;
}
registerOnTouched(fn: any) {
this.onTouched = fn;
}
}
和模板:
<mat-checkbox [ngModel]="value" (click)="next()" [disabled]="disabled" [indeterminate]="value === false" [color]="value === false ? 'warn' : 'accent'">
<ng-content></ng-content>
</mat-checkbox>
用法:
<app-tri-state-checkbox [(ngModel)]="done">is done</app-tri-state-checkbox>
<app-tri-state-checkbox formControlName="done">is done</app-tri-state-checkbox>
您还可以将默认磁带覆盖为例如枚举值:
You can also override default tape to e.g. enum values:
<app-tri-state-checkbox [tape]="customTape" [(ngModel)]="done">is done</app-tri-state-checkbox>
其中 customTape
替换默认值 [null, true, false]
customTape = [Status.open, Status.complete, Status.cancelled];
@angular/material <= 8
只要改变
{ provide: MAT_CHECKBOX_DEFAULT_OPTIONS, useValue: { clickAction: 'noop' } as MatCheckboxDefaultOptions },
自第 9 版起已弃用 MAT_CHECKBOX_CLICK_ACTION
to the deprecated since version 9 MAT_CHECKBOX_CLICK_ACTION
{ provide: MAT_CHECKBOX_CLICK_ACTION, useValue: 'noop' },
这篇关于Angular 5,Angular Material 复选框,有 3 种状态(选中、未选中、不确定)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!