Получить значение флажка из HTML в Angular 2 typescript.

Question

У меня есть две галочки в моем HTML следующим образом:

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

, но я не уверен в том, как получить значения флажок в моем файле машинопись. Я знаю, что могу выполнить это, вызвав отдельную функцию для каждого флажка и изменив значение в моем машинописном тексте. Однако это не похоже на лучший способ - если бы у меня было десять разных флажков, мне понадобилось бы 10 различных функций в моем машинописном тексте.

Есть ли простой способ получить или отключить флажок на основе идентификатора? Есть ли лучший способ?

Answer 1

Если вы хотите установить привязку с двусторонним связыванием, вы должны использовать привязку ngModel.

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

и в классе вашего компонента:

export class AppComponent { 
    checkboxValue: boolean = false; 
} 

Answer 2

вы можете привязать к проверяемой свойству input элемента, как показано ниже,

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

Вот Plunker.

Надеюсь, что это поможет!

Answer 3

Вы можете использовать [value]="myVariable" в чекбоксах!