迹忆客 专注技术分享

这篇有 Angular 的文章将着眼于执行复选框双向数据绑定的不同方法。

我们将使用 ngModelOptions 属性进行双向数据绑定。当存在 name 属性时，此解决方案最有效。

我们还将介绍 ngModel 属性，该属性使 checkboxFlag 能够在更改时存储实际的复选框状态。然后我们将使用 change 属性进行数据绑定，这样当组件中的值发生更改时，复选框也会获得一个新值。

在表单中使用 ngModel 时，它通常不起作用，因此最好使用 ngModelOptions 属性来确保复选框值随着组件中的数据更改而更改。

<input
	type="checkbox"
	[(ngModel)]="itemChange"
	[ngModelOptions]="{standalone: true}"/>

在某些情况下，如果输入不在表单内而是构成 ngFor 循环的一部分，则代码将不起作用。此外，name 属性需要包含在代码设置中才能使代码正常工作。

虽然上面的示例代码在前端部分处理双向数据绑定，但此解决方案在后端执行更改，正确使用 ngModel。

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

为了让这段代码完美运行，将 { FormsModule } 从 @angular/forms 导入 app.module.ts 并添加到导入数组中，如下所示：

import { FormsModule } from'@angular/forms';

[...]

@NgModule({
imports: [
	[...]
	FormsModule
],
[...]
})

name 属性必须是唯一的，默认选中状态才能按预期工作，并且它必须在 input 标签内。但是，如果你在重复对象数组时使用 ngFor 中的复选框，则此代码将不起作用，如下所示：

[{"checked":true},{"checked":false}]

然后我们也可以使用 change 属性在复选框上进行数据绑定。通过这种方法，我们可以更详细地创建代码。

html 组件将如下所示：

<input #saveCheckboxOne
	id="saveCheckboxOne"
	type="checkbox"
	[checked]="saveCheckbox"
	(change)="onSaveCheckboxChange(saveUserNameCheckBox.checked)" />

然后 component.js 会像下面这样写。

public saveCheckbox:boolean;

public onSaveCheckboxChange(value:boolean){
this.saveUsername = value;
}