検索機能で「結果が見つかりません」を処理する方法

Question

誰かが検索機能を使用してデータベースから結果を返さない場合に「結果が見つかりません」と表示しようとしています。私が取り組んでいる問題は、「結果が見つかりません」というメッセージがすぐに画面に表示され、検索クエリが実際に評価されているときに消えてしまい、結果が見つからない場合に再び表示されることです。言い換えると、画面に「結果が見つかりません」と表示する前に、クエリが実際に起動され、評価されるまで待つ必要があることを除いて、動作します。概念的には、これを行うための最良の方法は何ですか？一方では、私はタイムアウトを使うことができます。しかし、それは実際に問題を直接解決するものではありません。では、これにアプローチするにはどうすればよいでしょうか？

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

Answer 1

約束は何が必要のように聞こえる：Dこの線に沿って https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

何か

public get noResultsFound(): boolean 
{ 
    if (this.query && !this._isSearching && !this.hasResults) { 
     return true; 
    } 
} 

はここに私のビューのコードです：これは私が機能を持っているコードです。

search = (paramObj) : Promise<SomeDataClass> => { 
    // Some search logic 
} 

requestSearch() { 
    this.search(null).then((result) => { 
     if (result.length === 0) 
     { 
      //logic for showing 0 results here 
     } 
     else{ 
      // Show result? 
     } 
    }) 
} 

より完全な例は、このように少し見えます。

class example { 
    public someBool = false; 

    public search = (paramObj): Promise<Array<string>> => { 
     this.someBool = !this.someBool; 
     return new Promise<Array<string>>((resolver) => { 
      // This just simulates something taking time. 
      setTimeout(() => { 
       if (this.someBool) { 
        resolver([]); 
       } else { 
        resolver(["hi","there"]); 
       } 
      }, 1000) 
     }); 
    } 

    public requestSearch() { 
     this.search(null).then((result) => { 
      if (result.length === 0) { 
       console.log("empty") 
      } 
      else { 
       console.log(result) 
      } 
     }) 
    } 
} 

Answer 2

だから、最終的には私がいないデバウンスタイムアウトのいくつかの種類を使用してますが、機能は注意を払っていたものに変化することでこれを解決することができました - いわば。このように処理することで、「結果が見つかりません」ということは、それが想定される前にトリガされることはありません。これは、私が使用し終わったものです：