एंगुलर 2

Question

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

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

और जैसा कि आप देख सकते हैं:

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

यहाँ

प्रस्ताव को जोड़ने के लिए टाइपप्रति कोड है: यहाँ प्रस्ताव मॉडल

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

यहाँ

है एक प्रस्ताव के लिए HTML कोड है मैंने के लिए इसे डिफ़ॉल्ट रूप से false बनाया और प्रस्ताव को चेक करने के बाद मैं इसे बदलना चाहता हूं। यहां एक छवि है कि यह एक बेहतर समस्या समझने के लिए कैसे दिखता है।

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

Answer 1

PLUNKER DEMO

टेम्पलेट:उपयोग परिवर्तन घटना फ़ंक्शन को कॉल करें और घटना पारित करने के लिए।

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

टीएस:घटना प्राप्त करते हैं और यदि चेकबॉक्स संपत्ति जोड़ने से पहले चेक किया गया है की जाँच करें।

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

Answer 2

आप की तरह

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

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

Answer 3

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

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