Angular 2 Checkbox Zwei-Wege-Datenbindung

Dieser Angular Artikel befasst sich mit verschiedenen Methoden, um eine Kontrollkästchen-Zwei-Wege-Datenbindung durchzuführen.

Wir verwenden das Attribut ngModelOptions für die bidirektionale Datenbindung. Diese Lösung funktioniert am besten, wenn ein name-Attribut vorhanden ist.

Wir werden auch das Attribut ngModel einführen, das es dem checkboxFlag ermöglicht, den aktuellen Status der Checkbox zu speichern, wenn er geändert wird. Dann verwenden wir das Attribut change für die Datenbindung, sodass bei einer Wertänderung in der Komponente auch die Checkbox einen neuen Wert erhält.

Wenn ngModel in Formularen verwendet wird, funktioniert es meistens nicht, daher wird das Attribut ngModelOptions am besten verwendet, um sicherzustellen, dass sich der Kontrollkästchenwert ändert, wenn die Daten in der Komponente geändert werden.

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

In einigen Fällen funktioniert der Code nicht, wenn sich die Eingabe nicht in einem Formular befindet, sondern Teil der ngFor-Schleife ist. Außerdem muss das Attribut name im Code-Setup enthalten sein, damit der Code gut funktioniert.

Während der obige Beispielcode die bidirektionale Datenbindung auf dem Frontend-Teil behandelt, führt diese Lösung Änderungen auf dem Backend durch, wobei ngModel richtig verwendet wird.

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

Damit dieser Code perfekt funktioniert, importieren Sie { FormsModule } von @angular/forms in app.module.ts und fügen Sie es wie folgt zum imports-Array hinzu:

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

[...]

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

Das Attribut name muss eindeutig sein, damit der standardmäßig geprüfte Status wie erwartet funktioniert, und es muss sich innerhalb des Tags input befinden. Dieser Code funktioniert jedoch nicht, wenn Sie das Kontrollkästchen in einem ngFor verwenden, während Sie ein Array von Objekten wiederholen, wie folgt:

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

Dann können wir auch das Attribut change verwenden, um die Datenbindung an Checkboxen vorzunehmen. Bei diesem Ansatz erstellen wir die Codes detaillierter.

Die HTML-Komponente sieht so aus:

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

Dann wird die Komponente.js wie unten beschrieben geschrieben.

public saveCheckbox:boolean;

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