Angular 2 中的核取方塊雙向資料繫結

這篇有 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;
}