:strip_exif()/u/382787/crop6144d5a9d771d_cropped.gif?f=community)
Hoi allemaal,
Om mezelf RxJS aan te leren heb ik vandaag deze tutorial eens opgepakt. In het kort draait het om het ophalen van een lijst met Github user data, en daar een lijst op de pagina van te maken. Die lijst kun je verversen, en je kan users uit de lijst weghalen, waarna de lijst automatisch wordt aangevuld met een nieuwe user.
Ik heb mijn eigen draai aan de tutorial gegeven door het Angular 6 framework te gebruiken. Het is me gelukt om de lijst met users op het scherm te toveren, maar ik heb nog wat moeite met het replacen van de users in de lijst. De uitdaging is uiteraard om dit door gebruik van streams voor elkaar te krijgen.
Je kan mijn project hier vinden: https://stackblitz.com/edit/angular-xhueyz
De lijst die op het scherm verschijnt is samengesteld uit SuggestionComponents. Ik wil graag weten wanneer de gebruiker op het kruisje in een SuggestionComponent drukt, zodat ik het corresponderende item uit de lijst kan vervangen. Daarom heeft elke SuggestionComponent een onChange stream die naar het volgende element springt wanneer er op het kruisje geklikt wordt.
In het component dat de lijst beheert (SuggestionsComponent) houd ik een verwijzing bij naar alle componenten van het type SuggestionComponent op de pagina in de vorm van de suggestions variabele. Deze heeft een Observable changed(), die de nieuwe lijst doorgeeft wanner deze is gewijzigd. Hier wil ik naar luisteren, zodat ik het vervangen van een item in de lijst kan triggeren voor elke suggestie.
Daar wringt 'm echter de schoen: de Observable changed() is van het type <any>, terwijl ik een <SuggestionComponent> verwacht. TypeScript is het daar ook niet mee eens en mijn script faalt dan ook op regel 41.
Op dit moment snap ik zelf niet helemaal wat ik fout doe, dus ik ben benieuwd of jullie suggesties voor me hebben. Wellicht doe ik zelfs veel te moeilijk en is er een betere aanpak.
Alvast bedankt!
Om mezelf RxJS aan te leren heb ik vandaag deze tutorial eens opgepakt. In het kort draait het om het ophalen van een lijst met Github user data, en daar een lijst op de pagina van te maken. Die lijst kun je verversen, en je kan users uit de lijst weghalen, waarna de lijst automatisch wordt aangevuld met een nieuwe user.
Ik heb mijn eigen draai aan de tutorial gegeven door het Angular 6 framework te gebruiken. Het is me gelukt om de lijst met users op het scherm te toveren, maar ik heb nog wat moeite met het replacen van de users in de lijst. De uitdaging is uiteraard om dit door gebruik van streams voor elkaar te krijgen.
Je kan mijn project hier vinden: https://stackblitz.com/edit/angular-xhueyz
De lijst die op het scherm verschijnt is samengesteld uit SuggestionComponents. Ik wil graag weten wanneer de gebruiker op het kruisje in een SuggestionComponent drukt, zodat ik het corresponderende item uit de lijst kan vervangen. Daarom heeft elke SuggestionComponent een onChange stream die naar het volgende element springt wanneer er op het kruisje geklikt wordt.
In het component dat de lijst beheert (SuggestionsComponent) houd ik een verwijzing bij naar alle componenten van het type SuggestionComponent op de pagina in de vorm van de suggestions variabele. Deze heeft een Observable changed(), die de nieuwe lijst doorgeeft wanner deze is gewijzigd. Hier wil ik naar luisteren, zodat ik het vervangen van een item in de lijst kan triggeren voor elke suggestie.
Daar wringt 'm echter de schoen: de Observable changed() is van het type <any>, terwijl ik een <SuggestionComponent> verwacht. TypeScript is het daar ook niet mee eens en mijn script faalt dan ook op regel 41.
Op dit moment snap ik zelf niet helemaal wat ik fout doe, dus ik ben benieuwd of jullie suggesties voor me hebben. Wellicht doe ik zelfs veel te moeilijk en is er een betere aanpak.
Alvast bedankt!