web-dev-qa-db-ja.com

Angular2でチェックボックスをオンにしたときにイベントを起動する

私はAngular2とウェブ全体で初心者です。checkboxをチェックしたり、Material-Designを使用してチェックを外したりするときに、データベース内のオブジェクトパラメータ値を変更するアクションを起動したい、[(ngModel)]しかし、何も起こりませんでした。アイデアは、それがtrueまたはfalse命題であるかどうかを判断するために、checked | uncheckedステータスの命題を追加する必要があるということです。これが命題モデルです

    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();})
    }

ご覧のとおり、デフォルトでproposition statusをfalseにしました。提案を確認したら変更します。以下は、問題をよりよく理解するためにどのように見えるかのイメージです。 enter image description here

助けてください？

html5checkboxdata-bindingtypescriptangular
37
selem mn

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();})
   }
}
86
Ankit Singh

二重モデルをngModel参照に追加すると、モデルプロパティへの双方向バインディングが得られます。その後、そのプロパティを読み取り、イベントハンドラーで使用できます。私の見解では、これが最もクリーンなアプローチです。

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

ngModelのように使用できます

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

コードのプロパティcheckboxValueを更新してチェックボックスの状態を更新するには、ユーザーがチェックボックスを変更したときにaddProp()が呼び出されます。

5
Günter Zöchbauer

デモをチェック： 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>
1
Vijay Chauhan