Agnular4 这段传查询参数的代码，问题出在哪里了？

Question

原来问过，但一直没有解决……
https://segmentfault.com/q/1010000014617475?_ea=3684537

这个请求是由哪发出的呢？
Request URL: http://localhost:4200/api/products?title=1234&category=-1

哪位朋友指点一下啊？
我应该如何排查错误呢

  search(params: ProductSearchParams): Observable<Product[]> {
    return this.http.get('/api/products', { search: this.encodeParams(params) }).map(res => res.json());
  }
  private encodeParams(params: ProductSearchParams) {
    return Object.keys(params)
      .filter(key => params[key])
      .reduce((sum: URLSearchParams, key: string) => {
        sum.append(key, params[key]);
        return sum;
      }, new URLSearchParams());
  }
}

1.点击页面搜索应该看到的正确结果如下：

2.当前情况是参数传递失败，如下：

3.搜索模板如下：

<form name="searchForm" role="form" [formGroup]="formModel" (ngSubmit)="onSearch()" novalidate>
  <div class="form-group" [class.has-error]="formModel.hasError('minlength', 'title')">
    <label for="productTitle">商品名称：</label>
    <input formControlName="title" type="text" id="productTitle" placeholder="商品名称" class="form-control">
    <span class="help-block" [class.collapse]="!formModel.hasError('minlength', 'title')">
      请至少输入3个字
    </span>
  </div>
  <div class="form-group"  [class.has-error]="formModel.hasError('positiveNumber', 'price')">
    <label for="productPrice">商品价格：</label>
    <input  formControlName="price" type="number" id="productPrice" placeholder="商品价格" class="form-control">
    <span class="help-block" [class.collapse]="!formModel.hasError('positiveNumber', 'price')">
      请输入正数
    </span>
  </div>
  <div class="form-group">
    <label for="productCategory">商品类别：</label>
    <select  formControlName="category" id="productCategory" class="form-control">
        <option value="-1">全部分类</option>
        <option *ngFor="let category of categories" [value]="category">{{category}}</option>

    </select>
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-primary btn-block">搜索</button>
  </div>
</form>

4.产品模板如下：

<div class="container">
    <div class="row">
        <div *ngFor="let product of products | async" class="col-lg-4">
            <div class="img-thumbnail margin_b">
                <img class="card-img-top" [src]="imgUrl" alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title">{{product.price}} 元</h5>
                    <h5 class="card-title">
                        <a [routerLink]="['/product', product.id]">{{product.title}}</a>
                    </h5>
                    <p class="card-text">{{product.desc}}</p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

似曾相识。我觉得点击后有请求就不是订阅的问题了。
你在这里面打印一下看看能不能读出表单数据

this.productService.searchEvent.subscribe(
    (params) => {
        console.log(params)
        this.products = this.productService.search(params)
    }
);

Answer 2

我觉得应该检查一下传入encodeParams函数的参数。感觉可能是传入参数相应key取值为null。因为有成功的情况，说明如果参数合理的话应该是没问题的。

Answer 3

看看你的模板是什么样的