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;
}
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