Solved: html ngfor na may index

Ang pangunahing problema na nauugnay sa paggamit ng direktiba ng ngFor na may isang index ay maaari itong humantong sa mga hindi inaasahang resulta kapag ang data ay inuulit sa mga pagbabago. Ito ay dahil ang index ay hindi awtomatikong ina-update kapag ang mga item ay idinagdag o inalis mula sa array, kaya kung ang isang bagong item ay idinagdag sa index 0, ang lahat ng iba pang mga item ay magkakaroon ng kanilang mga index na ibababa ng isa. Maaari itong humantong sa maling data na ipinapakita sa iyong view o hindi inaasahang pag-uugali sa iyong application.

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

1. Ang linya ng code na ito ay lumilikha ng isang hindi nakaayos na listahan.
2. Ang direktiba ng *ngFor ay ginagamit upang i-loop ang array ng mga item at ipakita ang bawat item sa listahan.
3. Ang let keyword ay ginagamit upang magdeklara ng variable na tinatawag na "item" na humahawak sa kasalukuyang item sa pag-ulit ng loop.
4. Ginagamit din ang let keyword para magdeklara ng variable na tinatawag na "i" na nagtataglay ng index ng kasalukuyang item sa pag-ulit ng loop.
5. Ipinapakita ng linyang ito ang bawat item sa listahan kasama ang index number nito (simula sa 0).

Ano ang Angular

Ang Angular ay isang open-source na front-end na web application framework na nakabatay sa JavaScript na pangunahing pinananatili ng Google at ng isang komunidad ng mga indibidwal at korporasyon upang matugunan ang marami sa mga hamon na kinakaharap sa pagbuo ng mga single-page na application. Ang mga bahagi ng JavaScript ay umaakma sa Apache Cordova, isang framework na ginagamit para sa pagbuo ng cross-platform na mga mobile app. Nilalayon nitong gawing simple ang pagbuo at pagsubok ng mga naturang application sa pamamagitan ng pagbibigay ng balangkas para sa mga arkitektura ng client-side model–view–controller (MVC) at model–view–viewmodel (MVVM), kasama ang mga bahagi na karaniwang ginagamit sa mga rich Internet application.

ngPara sa elemento

Ang NgFor ay isang Angular structural directive na nagbibigay-daan sa amin na mag-loop sa data at lumikha ng template para sa bawat item sa isang array o object. Ito ay ginagamit upang ulitin ang isang ibinigay na elemento ng HTML sa isang tiyak na bilang ng beses. Maaaring gamitin ang NgFor upang magpakita ng data mula sa isang array, object, o string. Maaari rin itong gamitin upang bumuo ng mga elemento ng HTML batay sa mga halaga ng isang array o object. Ang NgFor ay karaniwang ginagamit kasama ng iba pang mga Angular na direktiba tulad ng ngIf at ngSwitch.

Paano makakuha ng index ng elemento ng ngFor

Maaari mong gamitin ang index na keyword upang makuha ang index ng isang elemento sa isang ngFor loop. Ang syntax para dito ay ang mga sumusunod:

{{i}} – {{item}}

Sa halimbawang ito, ang variable na "i" ay maglalaman ng kasalukuyang index ng loop. Pagkatapos ay maaari mong gamitin ang variable na ito upang i-access o baguhin ang mga elemento sa iyong listahan.

Kaugnay na mga post:

Mag-iwan ng komento