html5 - Angular2 में चेकबॉक्स की जांच करते समय एक ईवेंट लॉन्च करें




checkbox data-binding (3)

मैं कोणीय 2 में नौसिखिया हूं और वैश्विक रूप से वेब में, मैं एक ऐसी क्रिया को लॉन्च करना चाहता हूं जो डाटाबेस में एक ऑब्जेक्ट पैरामीटर मूल्य बदलता है जब checkbox जांच करता है और Material-Design का उपयोग करके इसे अनचेक करता है, मैंने [(ngModel)] साथ प्रयास किया लेकिन कुछ भी नहीं हुआ । विचार यह है कि मुझे checked | unchecked साथ कुछ प्रस्ताव जोड़ना होगा checked | unchecked स्थिति यह बताने के लिए कि क्या यह true या false प्रस्ताव है। प्रस्ताव मॉडल यहाँ है

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

प्रस्ताव के लिए एचटीएमएल कोड यहां है:

<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>

प्रस्ताव जोड़ने के लिए टाइपस्क्रिप्ट कोड यहां दिया गया है:

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 बना proposition status और proposition status को चेक करने के बाद मैं इसे बदलना चाहता हूं। यहां एक छवि है कि यह एक बेहतर समस्या समझने के लिए कैसे दिखता है।

कोई मदद कृपया?


आप ngModel जैसे उपयोग कर सकते हैं

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

संपत्ति को अपडेट करके चेकबॉक्स स्थिति को अपडेट करने के लिए checkboxValue अपने कोड में addProp() और जब उपयोगकर्ता addProp() द्वारा चेकबॉक्स बदल दिया जाता है।


यदि आप ngModel संदर्भ में डबल पैराथेसिस जोड़ते हैं तो आपको अपनी मॉडल प्रॉपर्टी के लिए दो-तरफा बाध्यकारी मिलता है। उस संपत्ति को तब ईवेंट हैंडलर में पढ़ा और उपयोग किया जा सकता है। मेरे विचार में यह सबसे साफ दृष्टिकोण है।

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

डेमो जांचें : 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>




angular