ઉકેલાયેલ: html ngfor ઇન્ડેક્સ સાથે

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

<ul>
  <li *ngFor="let item of items; let i = index">{{i}} - {{item}}</li>
</ul>

1. કોડની આ લાઇન એક અવ્યવસ્થિત સૂચિ બનાવે છે.
2. *ngFor ડાયરેક્ટિવનો ઉપયોગ આઇટમ એરેમાંથી લૂપ કરવા અને યાદીમાંની દરેક આઇટમને પ્રદર્શિત કરવા માટે થાય છે.
3. let કીવર્ડનો ઉપયોગ "આઇટમ" નામના વેરીએબલને જાહેર કરવા માટે થાય છે જે લૂપના પુનરાવર્તનમાં વર્તમાન આઇટમ ધરાવે છે.
4. let કીવર્ડનો ઉપયોગ “i” નામના ચલને જાહેર કરવા માટે પણ થાય છે જે લૂપના પુનરાવૃત્તિમાં વર્તમાન આઇટમનો ઇન્ડેક્સ ધરાવે છે.
5. આ લાઇન સૂચિમાંની દરેક વસ્તુને તેના અનુક્રમણિકા નંબર (0 થી શરૂ કરીને) સાથે દર્શાવે છે.

કોણીય શું છે

Angular એ JavaScript-આધારિત ઓપન-સોર્સ ફ્રન્ટ-એન્ડ વેબ એપ્લિકેશન ફ્રેમવર્ક છે જે મુખ્યત્વે Google અને વ્યક્તિઓ અને કોર્પોરેશનોના સમુદાય દ્વારા જાળવવામાં આવે છે જેથી સિંગલ-પેજ એપ્લિકેશન વિકસાવવામાં આવતા ઘણા પડકારોનો સામનો કરી શકાય. JavaScript ઘટકો Apache Cordova ને પૂરક બનાવે છે, જે ક્રોસ-પ્લેટફોર્મ મોબાઇલ એપ્લિકેશન્સ વિકસાવવા માટે વપરાતું ફ્રેમવર્ક છે. તેનો ઉદ્દેશ્ય ક્લાયંટ-સાઇડ મોડલ-વ્યૂ-કંટ્રોલર (MVC) અને મોડલ-વ્યૂ-વ્યૂ-મોડલ (MVVM) આર્કિટેક્ચર માટેનું માળખું પૂરું પાડીને આવી એપ્લિકેશનોના વિકાસ અને પરીક્ષણ બંનેને સરળ બનાવવાનો છે, સામાન્ય રીતે સમૃદ્ધ ઇન્ટરનેટ એપ્લિકેશન્સમાં ઉપયોગમાં લેવાતા ઘટકો સાથે.

ng તત્વ માટે

NgFor એ એંગ્યુલર સ્ટ્રક્ચરલ ડાયરેક્ટિવ છે જે અમને ડેટા દ્વારા લૂપ કરવા અને એરે અથવા ઑબ્જેક્ટમાં દરેક આઇટમ માટે ટેમ્પલેટ બનાવવાની મંજૂરી આપે છે. તેનો ઉપયોગ આપેલ HTML ઘટકને નિર્દિષ્ટ સંખ્યામાં પુનરાવર્તન કરવા માટે થાય છે. NgFor નો ઉપયોગ એરે, ઑબ્જેક્ટ અથવા સ્ટ્રિંગમાંથી ડેટા પ્રદર્શિત કરવા માટે થઈ શકે છે. તેનો ઉપયોગ એરે અથવા ઑબ્જેક્ટના મૂલ્યોના આધારે HTML ઘટકો બનાવવા માટે પણ થઈ શકે છે. NgFor નો ઉપયોગ સામાન્ય રીતે અન્ય કોણીય નિર્દેશો જેમ કે ngIf અને ngSwitch સાથે સંયોજનમાં થાય છે.

ngFor તત્વની અનુક્રમણિકા કેવી રીતે મેળવવી

તમે ngFor લૂપમાં તત્વની અનુક્રમણિકા મેળવવા માટે ઇન્ડેક્સ કીવર્ડનો ઉપયોગ કરી શકો છો. આ માટેની વાક્યરચના નીચે મુજબ છે:

{{i}} – {{item}}

આ ઉદાહરણમાં, “i” વેરીએબલમાં લૂપનો વર્તમાન ઇન્ડેક્સ હશે. પછી તમે તમારી સૂચિમાંના ઘટકોને ઍક્સેસ કરવા અથવા સંશોધિત કરવા માટે આ ચલનો ઉપયોગ કરી શકો છો.

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

પ્રતિક્રિયા આપો