角度5 - HttpParamsを使用して検索/フィルタリングする方法

Question

HTTPParamsを適切に使用してフィルタを適用するにはどうすればよいでしょうか。

ユーザーは、複数の言語、種類、および興味によってフィルタリングできます。

component.ts

this.filterForm = this.fb.group({ 
     language: [], 
     type: [], 
     interests: [], 
    }) 


    this.filterForm.valueChanges.subscribe((res) => { 
     console.log(res); 
     let filters = res; 
     this.momentService.search(filters).subscribe((res) => { 
      console.log(res); 
     }); 
    }); 

は、これは、データが私はフィルターが私のサービスにオブジェクトを渡す

.service.ts

のように見えるものです/ searchへのapi呼び出しを行います。

search(filters) { 

    let endpoint = this.path + 'search'; 

    let params = new HttpParams().set('filters', filters); 

    return this.apiService.get(endpoint, params); 

} 

要求 URL：http://localhost:3000/api/moment/search?filters=%7B%22language%22:%5B%22Arabic%22%5D,%22type%22:%22classmates%22,%22interests%22:%5B%22Computer%20programming%22,%22Cryptography%22%5D%7D

バックエンド/検索

search(req, res) { 

    let search = req.query; 
    console.log(search); 
    return res.json(search); 

    // TODO: Do search with filter objec. 

} 

マイノードバックエンドがそうのようにそれを受けて、私はこれで何もすることができません。 JSON.Stringfyを使用してバックエンドに渡そうとしましたが、文字列になると結果をオブジェクト形式に変換できません。

{ filters: '[object Object]' } 

私はHTTPParmを適切に使用していないと思います。

Answer 1

あなたは次のようになりますケースのために、HttpParamsOptionsのfromObjectオプションを使用することができますどのようにあなたの `apiService.get`方法がどのように見えるん

search(filters) { 
    let endpoint = this.path + 'search'; 
    let params = new HttpParams({ fromObject: filters }); 
    return this.apiService.get(endpoint, params); 
}