Angular 将复选框绑定到值，而不是使用被动形式的true/false

我试图得到一个使用被动/模型驱动表单的简单示例。我想将复选框数组绑定到值列表，而不是布尔值列表

这个plunker显示了这个问题：绑定到表单的值是布尔值，我希望答案类似于

[“value1”、“value2”等]

我有这样的东西，但我不知道如何得到我想要的结果

模板：

<form [formGroup]="checkboxGroup">
    <input *ngFor="let control of checkboxGroup.controls['myValues'].controls" 
    type="checkbox" id="checkbox-1" value="value-1" [formControl]="control" />
</form>

---

复选框值为选中（true）或未选中（false）。 一般来说，复选框有另一个值是没有意义的，但是如果您想这样做，您需要编写自己的复选框值评估器。

Angular.js（1.x）有ng true值和ng false值，这便于避免web表单和不灵活的后端之间的转换：

<input type="checkbox" ng-model="vv[name]" ng-true-value="'1'" ng-false-value="'0'"/>

Angular 2+具有“香蕉盒子”表示法，可直接绑定到模型，但该数据类型必须为布尔型，才能使用复选框：

<input type="checkbox" [(ngModel)]="vv[name]"/>

如果您确实不能使用布尔值，[checked]和（change）表示法是一种可行的替代方法（在本例中，1为真，0为假）：

想进一步说明吗？如果我用谷歌搜索，我会得到这个答案。我的模型可能需要一个字符串

'Y'

或

'N'

，那么为什么我不能动态设置它的

[选中]

和

[值]

属性，并在

[（ngModel）]中保留该字符串呢

？这让我很沮丧，我不明白Angular为什么会这样做，HTML可以有一个值，只有在元素被“选中”（值不限于bool）的情况下才会提交该值。如果您最初设置它，它将以角度工作，但一旦手动单击复选框一次，该值将丢失并转换为简单的布尔值。

<input type="checkbox" [(ngModel)]="vv[name]"/>

<input type="checkbox" [checked]="vv[name]==='1'"                                            
    (change)="vv[name]=$event.target.checked?'1':'0'"/>