时间戳

首页 > 解决方案 > 如何将自定义值分配给 mat-checkbox？

angular-material-7 - 如何将自定义值分配给 mat-checkbox？

问题描述

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

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

标签： angular-material-7

解决方案

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

HTML

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

TS

falseValue = 'No'
trueValue = 'Yes';

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

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

TS

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

推荐阅读