Het grootste probleem met betrekking tot het gebruik van de ngFor-richtlijn met een index is dat dit tot onverwachte resultaten kan leiden wanneer de gegevens die worden herhaald, veranderen. Dit komt omdat de index niet automatisch wordt bijgewerkt wanneer items worden toegevoegd aan of verwijderd uit de array, dus als een nieuw item wordt toegevoegd met index 0, wordt de index van alle andere items met één naar beneden verschoven. Dit kan leiden tot het weergeven van onjuiste gegevens in uw weergave of tot onverwacht gedrag in uw toepassing.
<ul>
<li *ngFor="let item of items; let i = index">{{i}} - {{item}}</li>
</ul>
1. Deze regel code maakt een ongeordende lijst.
2. De *ngFor-richtlijn wordt gebruikt om door de items-array te bladeren en elk item in de lijst weer te geven.
3. Het sleutelwoord let wordt gebruikt om een variabele met de naam "item" te declareren die het huidige item in de iteratie van de lus bevat.
4. Het sleutelwoord let wordt ook gebruikt om een variabele genaamd "i" te declareren die de index bevat van het huidige item in de iteratie van de lus.
5. Deze regel toont elk item in de lijst met zijn indexnummer (beginnend bij 0).
Wat is hoekig
Angular is een op JavaScript gebaseerd open-source front-end webapplicatieframework dat voornamelijk wordt onderhouden door Google en door een gemeenschap van individuen en bedrijven om veel van de uitdagingen aan te pakken die zich voordoen bij het ontwikkelen van single-page applicaties. De JavaScript-componenten vormen een aanvulling op Apache Cordova, een raamwerk dat wordt gebruikt voor het ontwikkelen van platformonafhankelijke mobiele apps. Het heeft tot doel zowel de ontwikkeling als het testen van dergelijke applicaties te vereenvoudigen door een raamwerk te bieden voor client-side model-view-controller (MVC) en model-view-viewmodel (MVVM) architecturen, samen met componenten die vaak worden gebruikt in rijke internettoepassingen.
ngVoor element
NgFor is een structurele richtlijn van Angular waarmee we gegevens kunnen doorlussen en een sjabloon kunnen maken voor elk item in een array of object. Het wordt gebruikt om een bepaald HTML-element een bepaald aantal keren te herhalen. NgFor kan worden gebruikt om gegevens van een array, object of string weer te geven. Het kan ook worden gebruikt om HTML-elementen te genereren op basis van de waarden van een array of object. NgFor wordt meestal gebruikt in combinatie met andere Angular-richtlijnen zoals ngIf en ngSwitch.
Hoe de index van het ngFor-element te krijgen
U kunt het sleutelwoord index gebruiken om de index van een element in een ngFor-lus te krijgen. De syntaxis hiervoor is als volgt:
In dit voorbeeld bevat de variabele "i" de huidige index van de lus. U kunt deze variabele vervolgens gebruiken om toegang te krijgen tot elementen in uw lijst of deze te wijzigen.
