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

【问题标题】：Angular 2+ tyring to bind a checkbox (mat-checkbox) Angular Material value from True or False to char values 'T', 'F'Angular 2+ tyring 绑定复选框（mat-checkbox）Angular Material 值从 True 或 False 到 char 值 'T'、'F'
【发布时间】：2018-06-01 16:37:07
【问题描述】：

需要帮助尝试将我的 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 }

【问题讨论】：

标签： angular forms typescript angular-material2

【解决方案1】：

您没有将复选框 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"

【讨论】：

【解决方案2】：

您只能为复选框设置一个布尔值，作为一种解决方法，您可以在提交表单时以及在侦听表单提交的方法中使用三元运算符分配“T”或“ F'。例如，如果您的 formData 为：

formData = {
    "mip" : true
}

然后使用：

(formData['mip']===true) ? formData['mip'] = 'T' : formData['mip] = 'F'

【讨论】：