Angular—商品在线竞拍项目中商品搜索功能,参数加不到请求的URL地址后面的解决方法

在这里插入图片描述
商品搜索功能的要求是:在左边的搜索表单中,添加相应的条件,点击搜索,右边轮播图下面就会出现对应的商品。可是当我跟着老师敲完时,却出现不了这样的效果,控制台也没有报错。代码如下图:
在这里插入图片描述
正确的情况应该是在请求的URL地址后面加上相应的参数,这样才会出现对应的商品。正确的情况如下图:
在这里插入图片描述
可是我的请求中,URL地址后面没有参数,如下图:
在这里插入图片描述
知道了是这个原因之后,就想知道为什么参数没有加到URL地址的后面,经过调试,发现 URLSearchParams 对象中没有数据,也就是 append 方法没有起作用。而且发现报了异常,这个异常不是在控制台中,隐藏的略深:
在这里插入图片描述
完整的异常信息是这样的:TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
通过上网查,知道在 Es5 的严格模式中,已经不允许像老师那样写代码了,也就是调用参数的方法。

解决方法

通过查看 search 参数的类型,不仅仅是 URLSearchParams,还可以是字符串和对象。
在这里插入图片描述
所以,我就采用了返回一个对象,而不是返回 URLSearchParams 这个类型的方法解决了:

private encodeParams(params: ProductSearchParams): {} {
    const result: {} = {};
    const urlParams = Object.keys(params).filter(key => params[key]);
    urlParams.forEach(element => {
      result[element] = params[element];
    });
    return result;
  }

将 encodeParams 方法改为上面那样,参数就可以加到URL地址的后面了,商品搜索的功能也就可以使用了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 12
    评论
评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值