时间戳

首页 > 解决方案 > Angular 2+ tyring 绑定复选框（mat-checkbox）Angular Material 值从 True 或 False 到 char 值 'T'、'F'

angular - Angular 2+ tyring 绑定复选框（mat-checkbox）Angular Material 值从 True 或 False 到 char 值 'T'、'F'

问题描述

需要帮助尝试将我的 Checkbox (mat-checkbox) Angular Material 的值更改为可以在我的表单与我的 json 对象一起提交时传递的值，例如“T”和“F”。JSON 对象中的这个“T”或“F”正在我的后端翻转一个 char 标志。任何帮助将不胜感激，不知道为什么我似乎无法弄清楚。

-----HTML------------

<div class="form-check">
  <label class="form-check-label" style="padding-right: 10px;">Send to MIP</label>
  <mat-checkbox name="mip" [ngModel]="mip"  class="form-check-input" #mip="ngModel"></mat-checkbox>
</div>

- - - 当前值 - - 

{ "mip": true }

标签： angularformstypescriptangular-material2

解决方案

您没有将复选框 UI 更改绑定到您的模型。[ngModel]只是将模型更改绑定到 UI/视图。用于[(ngModel)]双向绑定或添加(ngModelChange)用于视图到模型的绑定。要让它处理“T”和“F”，请实现一个 getter 和 setter：

<mat-checkbox [(ngModel)]="mip">Check me!</mat-checkbox>

get mip():boolean {
  return this._mip === "T";
}
set mip(value: boolean) {
  if(value) {
    this._mip = "T";
  } else {
    this._mip = "F";
  }
}
_mip: string = "T";

或者

<mat-checkbox #cb [ngModel]="getMip()" (ngModelChange)="setMip(cb.checked)">Check me!</mat-checkbox>

getMip():boolean {
  return this._mip === "T";
}
setMip(value: boolean) {
  if(value) {
    this._mip = "T";
  } else {
    this._mip = "F";
  }
}
_mip: string = "T"

推荐阅读