Запустите событие, установив флажок в Angular2

Я новичок в Angular2 и в Интернете по всему миру, я хочу запустить действие, которое изменяет значение параметра oject в базе данных при проверке checkbox и/или снятии флажка с помощью Material-Design, я пробовал с [(ngModel)] но ничего не произошло. идея состоит в том, что я должен добавить некоторые предложения с состоянием checked | unchecked, чтобы определить, является ли это предложением true или false. Вот модель предложения

    export class PropositionModel {
        id:string;
        wordingP:string; // the proposition
        propStatus:Boolean; // the proposition status
}

вот HTML-код для предложения:

<div class="uk-width-xlarge-1-1 uk-width-medium-1-2">
                <div (submit)="addProp1()" class="uk-input-group">
                    <span class="uk-input-group-addon"><input type="checkbox"  data-md-icheck/></span>
                    <label>Proposition 1</label>
                    <input [(ngModel)]="proposition1.wordingP" type="text" class="md-input" required class="md-input"/>
                </div>
            </div>

вот код TypeScript для добавления предложения:

addProp1() {
        this.proposition1 = new PropositionModel();
        this.proposition1.propStatus = false;
        this.propositionService.addProposition(this.proposition1)
            .subscribe(response=> {
                console.log(response);
                console.log(this.proposition1);
                this.proposition1 = new PropositionModel();})
    }

И как вы можете видеть, я сделал это false по умолчанию для proposition status, и я хочу изменить его, как только я проверил предложение. Вот образ, как он ищет лучшее понимание проблемы.

Любая помощь Пожалуйста?

Ответ 1

PLUNKER DEMO

Шаблон: используйте событие изменения, чтобы вызвать функцию и передать событие.

<input type="checkbox"  data-md-icheck (change)="addprop1($event)"/>

TS: получить событие и проверить, установлен ли флажок перед добавлением свойства.

addProp1(e) {

   if(e.target.checked){
        this.proposition1 = new PropositionModel();
        this.proposition1.propStatus = false;
        this.propositionService.addProposition(this.proposition1)
            .subscribe(response=> {
                console.log(response);
                console.log(this.proposition1);
                this.proposition1 = new PropositionModel();})
   }
}

Ответ 2

Если вы добавите двойную привязку к ссылке ngModel, вы получите двустороннюю привязку к свойству модели. Затем это свойство можно прочитать и использовать в обработчике событий. На мой взгляд, это самый чистый подход.

<input type="checkbox" [(ngModel)]="myModel.property" (ngModelChange)="processChange()" />

Ответ 3

Вы можете использовать ngModel как

<input type="checkbox" [ngModel]="checkboxValue" (ngModelChange)="addProp($event)" data-md-icheck/>

Чтобы обновить состояние флажка, обновив свойство checkboxValue в вашем коде и когда этот флажок изменяется пользователем addProp(), вызывается.