각도2에서 확인란을 선택할 때 이벤트 시작

각도2에서 확인란을 선택할 때 이벤트 시작

I've newbie in Angul2 and web global, I want to start an object parameter value in Database in Database 확인 시 데이터베이스에서 ubject parameter 값을 변경하는 작업을 실행하고자 함checkbox또는 다음을 사용하여 선택 해제Material-Design, 나는 시도했다.[(ngModel)]하지만 아무 일도 일어나지 않았다.그 생각은 내가 몇 가지 제안을 덧붙여야 한다는 것이다.checked | unchecked그것이 a인지 아닌지를 알 수 있는 지위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제안서 확인 후 변경하고 싶어.여기 더 나은 이슈 이해를 위해 어떻게 보이는지 이미지가 있다.

도움이 필요하십니까?

스택블리츠

템플릿: 네이티브를 사용할 수도 있고change이벤트 또는 NgModel 지침ngModelChange.

<input type="checkbox" (change)="onNativeChange($event)"/>

또는

<input type="checkbox" ngModel (ngModelChange)="onNgModelChange($event)"/>

TS:

onNativeChange(e) { // here e is a native event
  if(e.target.checked){
    // do something here
  }
}

onNgModelChange(e) { // here e is a boolean, true if checked, otherwise false
  if(e){
    // do something here
  }
}

ngModel 참조에 이중 괄호를 추가하면 모델 속성에 대한 양방향 바인딩을 얻을 수 있다.그런 다음 해당 속성을 읽고 이벤트 핸들러에서 사용할 수 있다.내가 보기에 그것은 가장 깨끗한 접근법이다.

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

사용할 수 있다ngModel맘에 들다

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

속성을 업데이트하여 확인란 상태를 업데이트하려면 다음과 같이 하십시오.checkboxValue코드 및 사용자에 의해 확인란이 변경될 때addProp()라고 불린다.

데모 확인: https://stackblitz.com/edit/angular-6-checkbox?embed=1&file=src/app/app.component.html

  CheckBox: use change event to call the function and pass the event.

<label class="container">    
   <input type="checkbox" [(ngModel)]="theCheckbox"  data-md-icheck 
    (change)="toggleVisibility($event)"/>
      Checkbox is <span *ngIf="marked">checked</span><span 
     *ngIf="!marked">unchecked</span>
     <span class="checkmark"></span>
</label>
 <div>And <b>ngModel</b> also works, it's value is <b>{{theCheckbox}}</b></div>

참조URL: https://stackoverflow.com/questions/37077707/launch-an-event-when-checking-a-checkbox-in-angular2