如何将自定义值分配给 mat-checkbox？答案

【问题标题】：How to assign custom values to mat-checkbox?如何将自定义值分配给 mat-checkbox？
【发布时间】：2021-03-10 16:37:08
【问题描述】：

我想用 mat-checkbox 附加我的状态字段，并希望以字符串的形式获取值，就像我们在 Material-1 中获取的一样。

我正在 Material-7 中寻找 ng-true-value="'ACTIVE'" ng-false-value="'INACTIVE'" 的替代品。

【问题讨论】：

标签： angular-material-7

【解决方案1】：

您可以通过使用MatCheckbox 的value 属性并监听更改来实现这一点。例如：

HTML

<mat-checkbox [value]="falseValue" (change)="checkboxChange($event.source, $event.checked)">
  Check me!
</mat-checkbox>

falseValue = 'No'
trueValue = 'Yes';

checkboxChange(checkbox: MatCheckbox, checked: boolean) {
  checkbox.value = checked ? this.trueValue : this.falseValue;
}

您也可以将其实现为指令：

import {Directive, Input} from '@angular/core';
import {MatCheckbox} from '@angular/material/checkbox';

@Directive({
  selector: 'mat-checkbox[checkboxValue]',
  exportAs: 'checkboxValue'
})
export class CheckboxValueDirective {

  @Input('checkboxValue') checkbox: MatCheckbox;
  @Input() falseValue: string = '0';
  @Input() trueValue: string = '1';

  ngOnInit() {
    this.checkbox.value = this.checkbox.checked ? this.trueValue : this.falseValue;
    this.checkbox.registerOnChange((checked: boolean) => {
      this.checkbox.value = checked ? this.trueValue : this.falseValue;
    })
  }
}

用法：

<mat-checkbox #checkbox [checkboxValue]="checkbox" trueValue="Yes" falseValue="No" [checked]="true">
  Check me!
</mat-checkbox>

这是 StackBlitz 上的指令示例：https://stackblitz.com/edit/angular-aapsr6?file=app/checkbox-value-directive.ts

【讨论】：

也许你可以回答，stackoverflow.com/questions/65429846/…

【解决方案2】：

我使用了类似于上面评论的方法。将几个复选框的值保存在一个名为filtroStatus

的数组中

filtroStatus: string[] = [];    
checkboxChange(checkbox: MatCheckbox, checked: boolean, statusValue: string){
  if (checked) { 
    this.filtroStatus.push(statusValue);
    statusValue === 'em_analise' ? this.filtroStatus.push('pendente') : null;
    statusValue === 'em_dia' ? this.filtroStatus.push('em_andamento') : null;
    } else {
      const index = this.filtroStatus.indexOf(statusValue);
      const total_excluir = statusValue ==='em_analise' || 'em_dia' ? 2 : 1;

      index >= 0 ? this.filtroStatus.splice(index, total_excluir) : null ; 
    }
}

【讨论】：

【解决方案3】：

对于寻求简单答案的人

TS：

import { Directive, Input } from '@angular/core';
import { ControlValueAccessor } from '@angular/forms';
import { MatCheckbox } from '@angular/material/checkbox';

@Directive({
  selector: 'mat-checkbox[appCheckboxValue]'
})
export class CheckboxValueDirective implements ControlValueAccessor {
  @Input() trueValue = true;
  @Input() falseValue = false;

  constructor(@Optional() @Self() private ngControl: NgControl, private checkbox: MatCheckbox) {
    if (this.ngControl) {
      this.ngControl.valueAccessor = this;
    }
  }

  writeValue(value: any): void {
    this.checkbox.writeValue(value === this.trueValue);
  }

  registerOnChange(fn: any): void {
    this.checkbox.registerOnChange((checked: boolean) => {
      fn(checked ? this.trueValue : this.falseValue);
    });
  }

  registerOnTouched(fn: any): void {
    this.checkbox.registerOnTouched(fn);
  }

  setDisabledState?(isDisabled: boolean): void {
    this.checkbox.setDisabledState(isDisabled);
  }
}

HTML：

<mat-checkbox appCheckboxValue trueValue="ACTIVE" falseValue="INACTIVE" [(ngModel)]="myCheck">
</mat-checkbox>

【讨论】：