オフィス狛 技術部のKoma(Twitterアカウントの中の人&CEO)です。
Angularで、バックエンドAPIとやり取りする時は、
「HttpClient」と「HttpParams」を使うと思います。
「HttpParams」はGETやDELETEの時のクエリパラメータを設定する時に使いますね。
getHogeInfo(req: HogeInfoRequestModel): Observable<HogeInfoModel> { const options = { params: new HttpParams() .set('hogeId', req.hogeId) .set('testCode', req.testCode) }; return this.http.get('xxxxx/yyyyy/hoge/info', options).pipe(tap(console.log)); }
この時、クエリパラメータ「koma」が配列型式で追加になったとします。
よっしゃ、追加したろ、という感じで、
getHogeInfo(req: HogeInfoRequestModel): Observable<HogeInfoModel> { const options = { params: new HttpParams() .set('hogeId', req.hogeId) .set('testCode', req.testCode) }; body.komaArray.forEach((item, index) => { options.params.append(`koma[${index}]`, item); }); return this.http.get('xxxxx/yyyyy/hoge/info', options).pipe(tap(console.log)); }とやると、うまくいきません・・・・。
ちょっとハマったのですが、
HttpParamsのappend()は、appendを実施したHttpParams自身には影響を及ぼさず、単純に追加したオブジェクトを返却するのみ。
と言う事です。つまり、
body.komaArray.forEach((item, index) => { options.params = options.params.append(`koma[${index}]`, item); });
こんな感じで、「options.params」に値を再設定しないといけません。
結構単純なところにハマってしまうものですね。
Angular
0 件のコメント:
コメントを投稿