Zurücksetzen einer Funktion "Keine Ergebnisse gefunden" nach Abschluss der Suche

Question

Nach einigem Ausprobieren habe ich eine funktionierende Angular2-Suchfunktion, die auch "Keine Ergebnisse gefunden" auf dem Bildschirm in der Instanz druckt, in der keine Ergebnisse gefunden werden Benutzeranfrage. Meine letzte Herausforderung besteht darin, das Feld neu einzustellen, damit das nächste Mal, wenn der Benutzer zum Suchfeld geht, die Meldung "Keine Ergebnisse gefunden" gelöscht wird. Mit anderen Worten, sobald der Benutzer das Suchfeld existiert, sollte es zurückgesetzt werden. Was ich bisher versucht habe, funktioniert nicht. Wenn der Benutzer aus dem Suchfeld klickt und dann wieder einklickt, wird der Text "Keine Ergebnisse gefunden" immer noch von der letzten Instanz auf den Bildschirm gedruckt. Dies ist, was ich bin mit dem Druck auf dem Bildschirm „Keine Ergebnisse“ zu handhaben:

public get noResultsFound(): boolean 
{ 
    if (!Object.isNullOrUndefined(this._results) && this._results.length < 1) { 
     return true; 
    } else if (Object.isNullOrUndefined(this.query)) { 
     return false; 
    } 
} 

Und meiner Meinung nach habe ich folgendes:

<div class="field-container"> 
    <i *ngIf="isSearchIconVisible" class="material-icons search-icon">search</i> 
    <auto-complete-field 
      class="auto-complete-field" 
      #autoCompleteField 
      (keyup)="onKeyUp($event)" 
      (focus)="onFocus()" 
      (blur)="onBlur()" 
      [(value)]="query" 
      [(options)]="__autoCompleteSuggestions">Loading... 
    </auto-complete-field> 
    <div *ngIf="inputHasFocus && noResultsFound" class="no-results-found">No Results Found</div> 
</div> 

Answer 1

Nach dem, was du bist Ich würde vorschlagen, dies als Teil Ihrer onBlur() zu behandeln. Also statt:

*ngIf="inputHasFocus && noResultsFound"

so etwas wie:

<div *ngIf="showNoResults" class="no-results-found">No Results Found</div>

Dann in Ihrem Controller, setzen showNoResults zu true wenn noResultFound() gibt true zurück, und setzen Sie ihn auf false in onBlur()