Zeige nur div, wenn der beobachtbare Stream leer ist

Question

Ich benutze eine Textsuchfunktion ähnlich der angular2 heros Anleitung, habe aber Probleme beim Ausblenden eines div, wenn der Benutzer nicht sucht. Ich habe den folgenden Code in meiner Komponente:

searchLocations: Observable<Location[]>; 
private searchTerms = new Subject<string>(); 

// ... 

ngOnInit(): void { 
    // ... 
    this.searchLocations = this.searchTerms 
     .debounceTime(300) 
     .distinctUntilChanged() 
     .switchMap(term => term 
      ? this.locationSearchService.search(term) 
      : Observable.of<Location[]>([])) 
     .catch(error => { 
      console.error(error); 
      return Observable.of<Location[]>([]); 
     }); 
} 

dann in meinem html, ich zeigen die Ergebnisse eines Benutzers mit

Suche

<div class="results"> 
    <div *ngFor="let loc of searchLocations | async" class="search-result"> 
     {{ loc.name }}, {{ loc.adminName1 }}, {{ loc.countryCode }} 
    </div> 
</div> 

Aber mit meinem aktuellen Code, der results div ist immer Geschenk. Wie kann ich überprüfen, ob ein beobachtbarer Stream leer ist? Ich habe versucht, .count() und .length(), aber diese beiden auch Observablen zurückkehren .... Ich nehme an, ich brauche so etwas zu tun:

<div class="results" *ngIf="???"> 
    <!-- ... --> 
</div> 

Answer 1

In Ihrer ngIf Richtlinie, sollten Sie auch die Asynchron-Rohr verwenden, da diese beobachtbar ist :

<div class="results" *ngIf="!(searchLocations | async)?.length"> 
     <div *ngFor="let loc of searchLocations | async" class="search-result"> 
      {{ loc.name }}, {{ loc.adminName1 }}, {{ loc.countryCode }} 
     </div> 
    </div>