Angular - async pipe czyli asynchroniczne wykonanie zapytania do serwera
Stronę tą wyświetlono już: 5141 razy
Angular udostępnia pipe-a o nazwie async. Umożliwia on asynchroniczne wykonanie zapytania do serwera, dzięki czemu dany element strony będzie w stanie wyświetlić się prawidłowo. Prosty przykład wykorzystania tego pipa będzie wymagał użycia omawianego wcześniej na stronie Programowanie → Angular - podstawy → Angular - tworzenie lokalnego serwera na potrzeby serwisów serwera lokalnego. Jego uruchomienie będzie wymagało obecności np. takiego przykładowego zbioru danych:
Zapisanego w pliku json_data.json. Teraz start serwera za pomocą polecenia:
json-server json_data.json
Dla sprawdzenia w przeglądarce można wpisać: localhost:3000 by sprawdzić, czy wszystko działa prawidłowo. Jeżeli tak to czas stworzyć sobie komponent, który w jakiś w miarę przyzwoity sposób wyświetli te dane. Tak więc tworzę sobie komponent o nazwie booksList:
ng g c bookList
Do wczytywania danych z serwera wykorzystam serwis opisywany już wcześniej na stronie Programowanie → Angular - podstawy → Angular - komunikacja z serwerem za pomocą HttpClient. Natomiast w HTML-u komponentu wykorzystam materialową tabelkę. Żeby jednak było to możliwe konieczne jest zainstalowanie biblioteki material w następujący sposób:
npm install @angular/material
a następnie dodać do projektu:
ng add @angular/material --save
Teraz w module komponentu np. app.module.ts konieczne będzie zaimportowanie modułu MatTableModule.
Po wykonaniu wszystkich tych niezmiernie nużących czynności można zacząć tworzyć swoją pierwszą tabelkę materialową w HTML-u komponentu:
W pierwszej linijce wczytywane są asynchronicznie dane. Zmienna dataSource to specjalna zmienna przechowująca między innymi dane do wyświetlania w tabelce. Natomiast displayedColumns to zmienna, która zawiera nazwy wyświetlanych kolumn w postaci tablicy string-ów oznaczających nazwy plików. Znacznik ng-container opisuje zawartość kolumny identyfikowanej za pomocą atrybutu matColumnDef będącego nazwą kolumny. Znacznik th zawierający dyrektywę mat-header-cell określa nagłówek kolumny, natomiast dane są wyświetlane w znaczniku td. Odwołanie się do danych jest możliwe dzięki dyrektywie *matRowDef, w której można utworzyć odwołanie do rekordu danych:
Możliwe jest również uzyskanie indeksu danego rekordu:
Dane dotyczące kolumn nagłówka i rekordów danych zostały zapisane na końcu tabelki. Odpowiednie dyrektywy mat-header-row i mat-row wiążą dany znacznik th z nagłówkiem lub danymi.
Przejdźmy jednak do kodu samego komponentu, albowiem treścią tego tematu nie jest tworzenie tabelek, a użycie samego asynchronicznego ładowania danych. Oto kod komponentu:
Co trzeba zrobić, aby dane przeładować asynchronicznie? W tym przypadku trzeba wyczyścić pole data pola dataSource komponentu. Nie jest to najlepsze rozwiązanie, ponieważ jeżeli w bazie danych nie będzie wpisu to żądanie cały czas będzie ponawiane. Jest jednak to dobre rozwiązanie, gdy wiadomym jest, że dane takie muszą istnieć w bazie danych. Dla przykładu, użytkownik się zalogował pobierając dane dostępowe do różnych elementów systemu jakim jest tworzony przez ciebie program. W takim przypadku konieczny będzie dostęp do tych danych aby poprawnie wyświetlać widok. Takie więc asynchronicznie ładowane pozwoli na odzyskiwanie danych, gdy np. użytkownik odświeży stronę.
Tytuł:
Angular. Profesjonalne techniki programowania. Wydanie IV
Autor:
Adam Freeman
Tytuł:
Angular. Programowanie z użyciem języka TypeScript. Wydanie II
Autor:
Yakov Fain, Anton Moiseev
Tytuł:
ASP.NET Core, Angular i Bootstrap. Kompletny przybornik front-end developera
Autor:
Simone Chiaretta
Tytuł:
Angular instalacja i działanie. Nauka krok po kroku
Autor:
Shyam Seshadri
Tytuł:
Angular w akcji
Autor:
Jeremy Wilken
Tytuł:
ASP.NET Core 2 i Angular 5. Przewodnik dla Full-Stack Web Developera
Autor:
Valerio De Sanctis
Tytuł:
Angular. Profesjonalne techniki programowania. Wydanie II
Autor:
Adam Freeman
Tytuł:
Angular 2. Programowanie z użyciem języka TypeScript
Autor:
Yakov Fain, Anton Moiseev
Tytuł:
Angular 2. Tworzenie interaktywnych aplikacji internetowych
Autor:
Gion Kunz