ઉકેલી: ERROR Error%3A ExpressionChangedAfterItHasBeenCheckedError%3A એક્સપ્રેશન ચેક કર્યા પછી બદલાઈ ગયું છે.

છેલ્લો સુધારો: 09/22/2023

JavaScript ડેવલપમેન્ટની રોમાંચક દુનિયામાં, અમે ક્યારેક ક્યારેક એવા પડકારોનો સામનો કરીએ છીએ જે શરૂઆતમાં ભયાવહ લાગે છે, જેમાંથી એક કુખ્યાત છે. ભૂલ% 3A અભિવ્યક્તિ બદલાઈ ગઈ પછી તે તપાસવામાં આવી. આ સામાન્ય છતાં મુશ્કેલ ભૂલ, જોકે, કોણીયના ફેરફાર શોધ મિકેનિઝમના મુખ્ય ખ્યાલો અને સમયને સમજીને અટકાવી અને ઉકેલી શકાય છે.

[h2]ભૂલને સમજવી: કોણીયમાં ExpressionChangedAfterItHasBeenCheckedError [/h2]

અમે ભૂલના મૂળની ઊંડાણપૂર્વકની સમજણથી શરૂઆત કરીએ છીએ. જ્યારે કોણીય તેનું પરિવર્તન શોધ ચક્ર ચલાવે છે, ત્યારે તે અપેક્ષા રાખે છે કે કોઈપણ ડેટા બાઈન્ડિંગ્સ એપ્લિકેશનની સ્થિતિમાં ફેરફાર કરશે નહીં. આ ખાતરી આપે છે કે બીજા પાસ પછી ટેમ્પલેટ સ્થિર થઈ જશે. જો, જો કે, કોણીય એક ચક્ર પછી મૂલ્યમાં ફેરફાર શોધે છે, તો તે ExpressionChangedAfterItHasBeenCheckedError રજૂ કરે છે.

કોણીય પરિવર્તન શોધ મિકેનિઝમ બે તપાસનું સંચાલન કરે છે - પ્રથમ, મોડેલથી દૃશ્યમાં ફેરફારો તપાસવામાં આવે છે; બીજું, પ્રથમ ચેક પછી મોડેલની સ્થિતિ ચકાસવામાં આવે છે. જો આ બે તપાસ દરમિયાન મોડલની સ્થિતિ બદલાઈ જાય તો ભૂલ આવી જશે, જે સંકેત આપે છે કે દૃશ્ય સાચી સ્થિતિને પ્રતિબિંબિત કરશે નહીં.

[h2]ભૂલને અટકાવવી અને ઉકેલવી [/h2]

અમે હવે સમજીએ છીએ કે આ ભૂલનું કારણ શું છે, અમે તેનો સામનો કરવા તરફ આગળ વધી શકીએ છીએ. અગાઉ ઉલ્લેખ કર્યો છે તેમ, કોણીય ચેક દરમિયાન રાજ્યના ફેરફારોની પ્રશંસા કરતું નથી. તેથી, આપણે રાજ્યને સંશોધિત કરી શકે તેવા બાઈન્ડીંગ્સ બનાવવાનું ટાળવું જોઈએ.

આ હાંસલ કરવાની એક રીત ની મદદ સાથે હોઈ શકે છે સેટ ટાઈમઆઉટ કાર્ય આ JavaScript કાર્ય અસુમેળ રીતે કાર્ય અથવા અભિવ્યક્તિને એક્ઝિક્યુટ કરીને સમયની સમસ્યાઓનું સંચાલન કરવામાં સહાય કરે છે, તેથી અમને ભૂલને બાયપાસ કરવાની મંજૂરી આપે છે.

setTimeout(() => {
  // place code here
}, 0);

ઉપરોક્ત સ્નિપેટ એ સુનિશ્ચિત કરશે કે અમારા ફેરફારો વર્તમાન કૉલ સ્ટેકની બહાર થાય છે, આમ અસરકારક રીતે ફેરફાર શોધ મિકેનિઝમને બાયપાસ કરીને.

કોડ બદલવાનું પગલું દ્વારા પગલું સમજૂતી [/h2]

અહીંનો વિચાર એ સુનિશ્ચિત કરવાનો છે કે તમે તમારો રાજ્ય-બદલતો કોડ ની અંદર મૂકો છો સેટ ટાઈમઆઉટ કાર્ય આ કંઈક આના જેવું દેખાવું જોઈએ:

ngAfterViewChecked() {
  setTimeout(() => {
    this.expressionHasChangedErrorCausingProperty = 'new value';
  }, 0);
}

ઉપરના સ્નિપેટમાં, ngAfterViewChecked લાઇફસાઇકલ હૂક એ અમારા સ્ટેટ-ચેન્જિંગ કોડ મૂકવા માટે એક યોગ્ય સ્થળ છે, કારણ કે આ હૂક એંગ્યુલરના ફેરફારોની તપાસ પછી તરત જ ચાલે છે.

0 મિલિસેકન્ડના વિલંબ સાથે સેટટાઈમઆઉટ ફંક્શન JavaScriptને ઇવેન્ટ લૂપના આગલા ચક્રમાં ફંક્શન ચલાવવા માટે કહે છે, આદર્શ રીતે કોણીય ફેરફારો માટે તપાસ પૂર્ણ કરે તે પછી.

અન્ય ઉપયોગી પુસ્તકાલયોની શોધખોળ</h2>

સેટ ટાઈમઆઉટ ટેકનિક અસરકારક હોવા છતાં, તેની એપ્લિકેશનને છેલ્લા ઉપાય તરીકે ગણવી જોઈએ. એક આદર્શ રીતે ક્લીનર સોલ્યુશન્સ માટે લક્ષ્ય રાખવું જોઈએ, જેમ કે ઉપયોગ કરવો zone.js, અસુમેળ કામગીરીના સંચાલન માટે ખૂબ જ ઉપયોગી પુસ્તકાલય.

this.zone.runOutsideAngular(() => {
  // place code here
});

ઉપરોક્ત સ્નિપેટનો ઉપયોગ કરીને, જ્યારે કોણીય ફેરફારો માટે તપાસ કરે છે ત્યારે અમે નિયંત્રિત કરી શકીએ છીએ. Zone.js એંગ્યુલરને અસુમેળ કાર્યો પર બહેતર નિયંત્રણની મંજૂરી આપે છે, મેન્યુઅલ ટ્રિગરિંગ પર ઉચ્ચ કાર્યક્ષમતા પ્રદાન કરે છે.

એકંદરે, કોઈપણ પ્રોગ્રામિંગ ભૂલને ઓછી કરવી એ સ્ક્રિપ્ટના આર્કિટેક્ચરના પાયાને સમજવાની સાથે સાથે જરૂરી કોડને યોગ્ય રીતે અમલમાં મૂકવાનું શીખવા વિશે છે. ExpressionChangedAfterItHasBeenCheckedError એ એક અન્ય સામાન્ય પડકાર છે જે એક વખત આપણે કોણીયની ફેરફાર શોધ પ્રણાલી કેવી રીતે કામ કરે છે તેની સંપૂર્ણ સમજ મેળવી લઈએ તે પછી સરળતાથી ઉકેલી શકાય છે.

સંબંધિત પોસ્ટ્સ: