我有一个类Offer,它有一个属性“units”作为对象数组。
export class Offer {
public propertyA: string;
public propertyB: string;
public units: Unit[];
}
export class Unit {
public code: string,
public name: string,
public checked: boolean
}
我正在使用Angular2,这些单位必须是用户可以选择的复选框。而且我正在使用角材料。
html代码如下所示:
<div *ngFor="let unit of model.units; let i=index">
<mat-checkbox [(ngModel)]="model.units[i].checked"
id="units[{{i}}]" name="units[{{i}}]">
{{ unit.name }}
</mat-checkbox>
</div>
单位属性是使用以下方法加载的:
this.model.units.push(new Unit("code1","name1", false));
this.model.units.push(new Unit("code2","name2", false));
this.model.units.push(new Unit("code3","name3", false));
发送表单时,checked属性不包含checked值。
我做错了什么?
5条答案
按热度按时间luaexgnf1#
添加
[checked]="unit.checked"
并从mat-checkbox
中删除ngModel
,id
和name
。当你加载页面时,这会进行单向绑定,但是要进行双向绑定,你需要做一些类似于我在项目中做过的事情:在更改时传递
$event
并在组件文件中手动设置该值:将HTML更改为:
将此添加到组件文件:
编辑/更新:最近找到了一个双向绑定的解决方案,但没有显式处理它
确保
model.units
具有checked
的属性。这是添加属性的最简单方法:component.ts:
HTML格式:
如果您还想控制启用/禁用选项,请尝试添加以下内容:
component.ts:
HTML格式:
okxuctiv2#
这对我的工作测试在Angular 7.
确保每个复选框的名称都是唯一的
zzoitvuj3#
我在Angular 7中进行了测试,没有发现任何错误,您可以在此StackBlitz example中看到一个工作演示,但我的答案如下。
为了工作,您必须为ngModel绑定的输入给予唯一的
name
。以您的代码为例:
在这些情况下,我不喜欢使用数组表示法(
units[{{i}}]
),因为这意味着所有字段都连接在同一个东西中,但由于您的代码似乎可以工作,这只是一个首选项,而不是错误的原因。wfauudbj4#
如果不能像使用
FormGroup
那样使用[(ngModel)]
,可以执行以下操作。代码假定obj是自定义对象,并具有IsSeleted属性。并在onSelectionChanged中手动更新obj.IsSelected
3b6akqbq5#
还有一种可能更简单的方法。这种方法在表单组中运行良好