W moim komponencie Angular 2 mam tablicę Observable
list$: Observable<any[]>;
W moim szablonie mam
<div *ngIf="list$.length==0">No records found.</div>
<div *ngIf="list$.length>0">
<ul>
<li *ngFor="let item of list$ | async">item.name</li>
</ul>
</div>
Ale lista $ .length nie działa w przypadku tablicy Observable.
Aktualizacja:
Wygląda na to, że (list $ | async) ?. length podaje nam długość, ale poniższy kod nadal nie działa:
<div>
Length: {{(list$ | async)?.length}}
<div *ngIf="(list$ | async)?.length>0">
<ul>
<li *ngFor="let item of (list$ | async)">
{{item.firstName}}
</li>
</ul>
</div>
</div>
Czy ktoś może poprowadzić, jak sprawdzić długość tablicy Observable.
angular
observable
angular2-template
angular2-services
Naveed Ahmed
źródło
źródło
Odpowiedzi:
Możesz użyć
| async
rury:Aktualizacja - wersja Angular 6:
Jeśli ładujesz szkielet css, możesz tego użyć. Jeśli tablica nie zawiera elementów, wyświetli szablon css. Jeśli są dane, wypełnij
ngFor
.źródło
<div *ngIf="(list$ | async)?.length==0">No records found.</div>
(dodano?
)?
jest wymagany, ponieważlist$
jest ustawiany tylko wtedy, gdy Angular2 próbuje renderować widok po raz pierwszy.?
zapobiega obliczaniu reszty wyrażenia podrzędnego, dopóki część po lewej stronie?
zostanie zmieniona na!= null
(Elvis lub operator bezpiecznej nawigacji).async
rozwiązuje dane i dlatego moja następnaasync
potok w pętli nic nie wyświetla. A może*ngIf
tworzy dodatkowy zakres i dlatego nie działa. Ciężko powiedzieć. Ale podczas gdy moja pętla jest zawinięta wewnątrz if, nie wyświetla żadnych danych. Jeśli sam ocenitrue
poprawnie.Rozwiązanie dla plików .ts:
źródło
onDestroy
komponencieW przypadku Angular 4+ spróbuj tego
źródło
Chociaż ta odpowiedź jest poprawna
Pamiętaj, że jeśli używasz klienta http do wywoływania backendu (w większości przypadków tak się dzieje), otrzymasz zduplikowane wywołania interfejsu API, jeśli masz więcej niż jedną listę $ | async . Dzieje się tak, ponieważ każdy | async potok utworzy nowego subskrybenta do twojej listy $ obserwowalne.
źródło
To właśnie zadziałało dla mnie -
Pobieram dane z asynchronicznego serwera httpClient.
Wszystkie inne opcje tutaj nie działały, co było rozczarowujące. Szczególnie seksowna (list $ | async) fajka.
Basa ..
źródło
Twoje podejście ma inny poważny problem: wykorzystując potok asynchroniczny w swoim szablonie, w rzeczywistości rozpoczynasz tak wiele subskrypcji pojedynczego Observable.
KAMRUL HASAN SHAHED ma właściwe podejście powyżej: użyj potoku asynchronicznego raz, a następnie podaj alias dla wyniku, który możesz wykorzystać w węzłach podrzędnych.
źródło
Można również skrócić:
Po prostu użyj wykrzyknika przed nawiasem.
źródło
jonowy 4
zadziałało, kiedy usunąłem
$
znakźródło