Angular 6: Begynderfejl

Jeg starter dette dokument, for at minde mig selv om de fejl jeg IKKE må begå igen.

Change Detection og indexedDB  = blødende memory leak

Hver eneste gang en variabel ændrer værdi, vil Angular kører en såkaldt “change detection”. Dvs. at DOM opdateres i henhold til ændringen. Hvis du f.eks. har en [ngClass]="doSomething()" på samtlige felter i en formular, vil den funktion således blive kaldt rigtig mange gange… og hvis den funktion henter noget i localStorage via en async/await funktion, kan det gå helt galt.

Med “helt galt” mener jeg at browseren pludselig bruger 130-150% cpu og al anden kommunikation med localStorage pludselig tager en hulans tid, hvis det overhovedet kan lade sig gøre.

Jeg omskrev min funktion således at værdien hentes i databasen een gang for alle under initialisering, og dermed kan hentes i en lokal variabel:

Før:

Efter: