webentwicklung-frage-antwort-db.com.de

Checkboxwert aus HTML in abrufen Angular 2 TypeScript.

Ich habe zwei Checkboxen in meiner HTML-Datei:

<label><input type="checkbox" id="checkbox1" /> Folder 1: </label>
<label><input type="checkbox" id="checkbox2" /> Folder 2: </label>

ich bin mir jedoch nicht sicher, wie ich die Checkbox-Werte in meiner TypeScript-Datei abrufen kann. Ich weiß, dass ich dies erreichen kann, indem Sie für jedes Kontrollkästchen eine eigene Funktion aufrufen und einen Wert in meinem TypeScript ändern. Dies scheint jedoch nicht der beste Weg zu sein - wenn ich zehn verschiedene Kontrollkästchen hätte, würde ich 10 verschiedene Funktionen in meinem TypeScript benötigen.

Gibt es eine einfache Möglichkeit, anhand der ID zu ermitteln, ob das Kontrollkästchen aktiviert oder deaktiviert ist? Gibt es einen besseren Weg als das? 

5
Roka545

Wenn Sie das Ankreuzfeld zweiseitig binden möchten, sollten Sie die Bindung ngModel verwenden.

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

und in der Klasse Ihrer Komponente:

export class AppComponent { 
  checkboxValue: boolean = false;
}
8
andrea.spot.

sie können an die geprüfte Eigenschaft des input-Elements wie folgt binden:

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>
  <label><input type="checkbox" [checked]="checkbox1" /> Folder 1: </label>
<label><input type="checkbox" [checked]="checkbox2" /> Folder 2: </label>
  `
})
export class AppComponent { 
  name = 'Angular'; 
  checkbox1 = false;
  checkbox2 = true;
}

Hier ist der Plunker .

Hoffe das hilft!!

1
Madhu Ranjan

Sie können [value]="myVariable" in Checkboxen verwenden!

0
lastWhisper