在 Angular.io 中使用类将查询参数传递给 HttpClient

Question

我读过 in this post 我可以在 HttpParamsOptions 中使用 fromObject 将对象用作查询中的查询参数。不幸的是，我在让对象处于正确形状时遇到了一些问题。我认为它能够使用一个具有所有类型字符串的对象，并且不确定如何将其转换为正确的形状。我宁愿不必遍历对象键来让东西适合这个盒子——如果我必须这样做，它就会失去所有的价值。

谁能向我解释这里发生了什么？我已经阅读了有关可索引类型的信息，但这并没有帮助我弄清楚如何将其应用于这种情况。

报告类型错误：

TS2322: Type '{ fromObject: Query; }' is not assignable to type 'HttpParamsOptions'. 
  Types of property 'fromObject' are incompatible.
    Type 'Query' is not assignable to type '{ [param: string]: string | string[]; }'.
      Index signature is missing in type 'Query'.

调用站点（get 中以 {params: query} 开头并分解为 this）：

public retrieve(query: Query): Observable<PolicyRetrieveResult> {
  const q: HttpParamsOptions = {fromObject: query};
  const params = new HttpParams(q);
  return this.http.get<Result>(url, {params: params});
}

我的查询类：

export class Query {
  id: string;
  source: string = 'constant';
  type: string = 'otherConstant';
}

这里是 HttpParamsOptions 供参考：

export interface HttpParamsOptions {
    /**
     * String representation of the HTTP params in URL-query-string format. Mutually exclusive with
     * `fromObject`.
     */
    fromString?: string;
    /** Object map of the HTTP params. Mutally exclusive with `fromString`. */
    fromObject?: {
        [param: string]: string | string[];
    };
    /** Encoding codec used to parse and serialize the params. */
    encoder?: HttpParameterCodec;
}

Answer 1

既然你有字符串，为了简单起见，我建议你做这样的事情：

public retrieve(query: Query): Observable<PolicyRetrieveResult> {
  return this.http.get<Result>(url, {params: {...query}});
}

以后，如果你有非字符串对象，正确的语法是

params: HttpParams = new HttpParams({ fromObject: query })

不要使用HttpParamsOptions，当你看到它来自哪里你就会明白为什么：

import { HttpParamsOptions } from '@angular/common/http/src/params';