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

Oluwafisayo Oluwatayo 2021年12月20日
Angular 2 中的核取方塊雙向資料繫結

這篇有 Angular 的文章將著眼於執行復選框雙向資料繫結的不同方法。

我們將使用 ngModelOptions 屬性進行雙向資料繫結。當存在 name 屬性時,此解決方案最有效。

我們還將介紹 ngModel 屬性,該屬性使 checkboxFlag 能夠在更改時儲存實際的核取方塊狀態。然後我們將使用 change 屬性進行資料繫結,這樣當元件中的值發生更改時,核取方塊也會獲得一個新值。

在表單中使用 ngModel 時,它通常不起作用,因此最好使用 ngModelOptions 屬性來確保核取方塊值隨著元件中的資料更改而更改。

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

Angular 核取方塊資料繫結

在某些情況下,如果輸入不在表單內而是構成 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;
}
Oluwafisayo Oluwatayo avatar Oluwafisayo Oluwatayo avatar

Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.

LinkedIn