Angular ngFor – Leer alle functies, inclusief trackBy, waarom is het niet alleen voor Arrays?

In deze post gaan we de ngFor core directive doornemen, namelijk het volgende:

• wat ngFor doet en wat de syntaxis ervan is
• Wat zijn de meest voorkomende fouten in verband met ngFor
• Variabele zichtbaarheid
• Het vinden van de indexpositie van een element
• Hoe een tabel te strippen met even en odd
• Het identificeren van de first en het last element van een lijst
• Hoe houdt ngFor items bij, waarom kan het belangrijk zijn voor de prestaties?
• Hoe gebruik je trackBy?
• Wanneer gebruik je trackBy?
• Leer waarom ngFor niet alleen voor arrays is
• Een snelle vraag voor jou aan het eind over leren

Dus laten we beginnen met het duiken in ngFor ! Hieronder vindt u ook een video-versie van deze post als u dat liever heeft, en de lopende code van deze post is hier beschikbaar.

De ngFor-functies worden ook in deze video behandeld, kijk maar eens:

Wat kunnen we doen met ngFor?

De core directive ngFor stelt ons in staat om data presentatielijsten en tabellen in onze HTML templates te bouwen. Neem bijvoorbeeld de volgende gegevens:

Met ngFor kunnen we deze gegevens op het scherm afdrukken in de vorm van een gegevenstabel, door HTML te genereren zoals dit:

Wat is de syntaxis van ngFor?

Om ngFor te gebruiken, maken we een component, zodat we een werkend HTML-sjabloon hebben:

Dit sjabloon genereert de HTML-tabel die we hierboven hebben laten zien. We zien in dit voorbeeld de (meest voorkomende) syntaxis voor het gebruik van ngFor:

• we geven aan ngFor een iteratie-expressie door
• een lus-variabele met de naam hero wordt gedefinieerd met het sleutelwoord let, wat consistent is met de Javascript syntaxis
• de expressie heeft de vorm var i of items, wat consistent is met de Javascript of iteratie functionaliteit

Variabele Zichtbaarheid

Merk op dat de lus variabele hero alleen zichtbaar is binnen de lus, je zou niet in staat zijn deze te benaderen buiten de ngFor sectie.

Common ngFor Errors to watch for

Als je een AngularJs achtergrond hebt, zul je deze fout een paar keer zien voordat je gewend bent aan de nieuwe Angular syntax:

Can't bind to 'ngFor' since it isn't a known property of 'tr'

Dit komt omdat u per ongeluk ofwel item in items hebt gebruikt in plaats van item of items, of vergeten bent het let sleutelwoord aan het begin van de expressie toe te voegen:

Vinden van de index van een lijst element

Een veel voorkomende eis is om aan een lijst de numerieke index positie van zijn element toe te voegen. We kunnen de index van het huidige element krijgen door de variabele index te gebruiken:

Merk op dat je het let keyword nodig hebt om de waarde van de index te krijgen, anders krijg je een fout zoals deze:

Parser Error: Unexpected token = at column ...

Met deze wijziging ziet de gegenereerde HTML er nu als volgt uit:

Hoe een tabel te strippen met even en odd

Een andere veel voorkomende functionaliteit die nodig is bij het bouwen van tabellen is het kunnen strippen van een tabel door een andere css class toe te voegen aan de even of oneven rijen.

Laten we zeggen dat we aan bovenstaande tabel een CSS class even willen toevoegen als de rij even is en de CSS class odd als de rij oneven is.

Om dat te kunnen doen, hebben we een paar variabelen ter beschikking: even en odd, die samen met ngClass op de volgende manier gebruikt kunnen worden:

Laten we eens kijken naar de HTML die door dit sjabloon wordt gegenereerd:

Zoals we kunnen zien, heeft ngClass de CSS-klassen aan de juiste rijen toegevoegd, zoals we zouden verwachten.

Het eerste en het laatste element van een lijst identificeren

Net als de even en oneven functionaliteit, zijn er ook twee andere variabelen die kunnen worden gebruikt om het eerste en het laatste element van de lijst te identificeren:

Dit voegt een CSS class genaamd first toe aan het eerste element van de lijst, en een CSS class genaamd last aan het laatste element van de lijst:

Hoe werkt ngFor als we elementen toevoegen of verwijderen uit de lijst?

Als de invoerlijst wordt gewijzigd, zal ngFor proberen te voorkomen dat de DOM-elementen van de lijst voortdurend worden gemaakt en vernietigd, omdat dit een dure bewerking is. Ook betekent het doorgeven van een nieuwe lijst aan ngFor niet dat de hele lijst opnieuw wordt opgebouwd, dat wil zeggen dat het hele DOM opnieuw wordt aangemaakt.

Veel van de bestaande DOM-elementen worden hergebruikt en slechts enkele waarden daarin worden overschreven, en de beslissing wordt voor elk element in de lijst afzonderlijk genomen.

Om die beslissing te kunnen nemen moet Angular elk lijstelement op een unieke manier identificeren, want als we bijvoorbeeld een nieuwe lijst met een andere volgorde invoeren, zal Angular proberen de elementen te identificeren en de DOM-elementen van de lijst opnieuw te rangschikken zonder ze te verwijderen en opnieuw te maken.

Hoe worden lijstitems standaard bijgehouden?

ngFor houdt lijstitems standaard bij met behulp van objectidentiteit. Dit betekent dat als je een lijst met nieuwe objecten vanaf nul opbouwt met exact dezelfde waarden als de vorige lijst en deze nieuw opgebouwde lijst doorgeeft aan ngFor, Angular niet in staat zal zijn om te vertellen of een bepaald lijstitem al aanwezig is of niet.

Vanuit het oogpunt van objectidentiteit bevat de nieuwe lijst een geheel nieuwe set items, geheel anders dan de vorige set. Dit is bijvoorbeeld het geval als we de gegevens opnieuw opvragen vanuit de backend.

Tracken op objectidentiteit is een goede standaardstrategie omdat Angular geen informatie heeft over het object, dus het kan niet zeggen welke eigenschap het moet gebruiken voor tracking.

Waarom kan dit belangrijk zijn voor de prestaties?

Zoals we zien, doet ngFor out-of-the-box al veel optimalisaties om te proberen bestaande DOM-elementen zo veel mogelijk te hergebruiken, maar het doet dat op basis van objectidentiteit.

In het geval van sjablonen met grote lijsten, of lijsten die een groot deel van het scherm in beslag nemen, kunnen we zelfs met deze optimalisaties nog steeds tegen prestatieproblemen aanlopen en merken dat de UI traag is door de grote hoeveelheid DOM-elementen die worden gemaakt en vernietigd.

Als dat het geval is, kunnen we ngFor configureren om het volgen op iets anders te doen dan objectidentiteit.

Hoe gebruik je trackBy?

We kunnen ons eigen mechanisme voor het volgen van items in een lijst bieden door trackBy te gebruiken. We moeten een functie doorgeven aan trackBy, en de functie neemt een paar argumenten, namelijk een index en het huidige item:

Deze implementatie zou het volgen doen op basis van de id eigenschap.

Wanneer trackBy gebruiken?

Het gebruik van trackBy is een optimalisatie van de prestaties en is meestal niet standaard nodig, het is in principe alleen nodig als je tegen prestatieproblemen aanloopt.

Laten we zeggen dat je levert aan oude mobiele browsers of oude versies van IE: je zou kunnen overwegen om trackBy toe te passen als voorzorgsmaatregel in je grotere tabellen, maar het hangt echt af van je systeem en de use case.

Is ngFor alleen voor Arrays?

In dit voorbeeld hebben we aan ngForeen array van Javascript objecten doorgegeven, maar eigenlijk hoeven we niet per se een array aan ngFor door te geven om het te laten werken.

We kunnen er elke soort Javascript Iterable in het algemeen aan doorgeven, inclusief Iterables die door het framework zelf zijn gemaakt. Om dit te illustreren, gaan we een directive definiëren voor een configuratie-element genaamd hero:

We kunnen dit configuratie-element nu op de volgende manier in onze template gebruiken:

Nu gaan we deze gegevens uit de configuratie-elementen opvragen met @ContentChildren:

Ziet u wat hier is gebeurd? Het blijkt dat de QueryList een klasse is die deel uitmaakt van Angular en zelf een Iterable is! Dus hoewel we het programmatisch kunnen gebruiken in de component klasse, kunnen we het ook direct doorgeven aan ngFor en er direct overheen itereren.

En hetzelfde kan worden gedaan met elke andere Iterable in ons programma.

Ik hoop dat je genoten hebt van de post, ik nodig je uit om een kijkje te nemen in de lijst hieronder voor andere soortgelijke posts en bronnen over Angular.

En als je meer wilt weten over meer geavanceerde Angular Core features zoals ngFor, dan raden we je aan de Angular Core Deep Dive cursus te volgen, waar we alle Angular core directives tot in detail behandelen.

Ik nodig je uit om je aan te melden voor onze nieuwsbrief om op de hoogte te worden gehouden wanneer er meer berichten zoals deze verschijnen:

Als je net begint met het leren van Angular, kijk dan eens naar de Angular voor Beginners Cursus:

Andere berichten over Angular

Als je dit bericht interessant vond, kijk dan ook eens naar andere populaire berichten die je wellicht interessant vindt:

• Angular Router – Hoe bouw je een navigatiemenu met Bootstrap 4 en geneste routes
• Angular Router – Uitgebreide rondleiding, Vermijd veel voorkomende valkuilen
• Angular Components – The Fundamentals
• Hoe bouw je Angular apps met Observable Data Services – te vermijden valkuilen
• Inleiding tot Angular Forms – Template Driven vs Model Driven
• Angular ngFor – Leer alle functies inclusief trackBy, waarom is het niet alleen voor Arrays?
• Angular Universal In Practice – Hoe bouw je SEO vriendelijke Single Page Apps met Angular
• Hoe werkt Angular Change Detection eigenlijk?
• Typescript 2 Type Definitions Crash Course – Types en Npm, hoe zijn ze aan elkaar gekoppeld? @types, Compiler Opt-In Types: Wanneer te gebruiken en waarom?