मेरे पास स्क्रीन पर प्रदर्शित होने वाले ट्यूटोरियल नामक एक सूची ऑब्जेक्ट है। प्रत्येक ट्यूटोरियल के अंदर राज्यों की एक सूची होती है, जिसके आगे एक चेक बॉक्स होता है, जैसा कि यहां दिखाया गया है:

मेरे ट्यूटोरियल डेटाबेस से आ रहे हैं और राज्यों की सूची भी डेटाबेस से आ रही है। ट्यूटोरियल में एक नाम और स्ट्रिंग सरणी होती है जिसमें इससे जुड़े राज्यों की सूची होती है। यह मेरा एचटीएमएल है:

 <div class="container">
  <div *ngFor="let t of tutorials" id="quote" class="quote">
    <div class="tutorial-name">
      {{ t.name }}
    </div>

    <div *ngFor="let s of states" class="tutorial-states" id="">
      <mat-checkbox [ngModel]="checkIfTrue(t.states, s)" (click)="changeState(t.name,s)">{{ s }}</mat-checkbox>
    </div>

  </div>
</div>

आवश्यक चेक बॉक्स वांछित के रूप में सक्षम हैं लेकिन [ngModel]="checkIfTrue(t.states, s)" वांछित से अधिक बार चल रहा है। मेरे पास 3 ट्यूटोरियल और 3 अलग-अलग राज्य हैं इसलिए ngModel को केवल 9 बार ट्रिगर किया जाना चाहिए। मैं अपने टाइपप्रति में उस समारोह पर एक गिनती डाल रहा हूँ:

  checkIfTrue(states: string[], state: string) {
    this.count += 1;
    console.log(this.count)
    if(states.includes(state)){
  return true;
}

काउंट इसे 252 या 54 बना रहा है, जो वांछित 9 से कहीं अधिक है। क्या किसी को पता है कि इसे इतना ट्रिगर क्यों किया जा रहा है और मैं इसे कैसे रोकूं? या मेरे लूप्स में कोई त्रुटि है और इसे इतना ट्रिगर करना मेरी गलती है।

0
Gary Kelly 15 सितंबर 2020, 14:39

1 उत्तर

सबसे बढ़िया उत्तर

गिनती क्यों बढ़ती है?

आप इसे इसलिए देखते हैं क्योंकि आप किसी फ़ंक्शन को इनपुट के लिए बाध्य कर रहे हैं। कोणीय को प्रत्येक परिवर्तन का पता लगाने के चक्र के दौरान इस इनपुट को फिर से जांचना होगा ताकि यह निर्धारित किया जा सके कि इसे पुन: प्रस्तुत करने की आवश्यकता है या नहीं। ऐसा करने के लिए, इसे प्रत्येक चक्र के दौरान आपके फ़ंक्शन को कॉल करना होगा और परिणाम की तुलना पिछले परिणाम से करनी होगी। मैंने StackBlitz पर एक उदाहरण जोड़ा है। जहां आप इस व्यवहार को स्पष्ट रूप से देख सकते हैं (कोणीय परिवर्तन का पता लगाने के लिए बटन पर क्लिक करें)।

आप इसे अपने कोड में कैसे रोक सकते हैं?

अपने टेम्पलेट के लिए बाध्यकारी कार्य कोणीय में एक बुरा अभ्यास है। कारण ठीक वही समस्या है जो आप अभी देख रहे हैं: फ़ंक्शन को बहुत कहा जाता है। इसलिए, आप अपने फ़ंक्शन को बाध्य न करके इसे रोक सकते हैं, बल्कि अपने टेम्पलेट से जुड़ने के लिए एक चर का उपयोग कर सकते हैं और जब भी आपका राज्य बदलता है तो उस चर को अपडेट कर सकते हैं।

0
pascalpuetz 15 सितंबर 2020, 16:07