Angular 服务为请求的 url 中的参数 id 返回无效数据“未定义”

Question

我有一个在组件中调用的服务，但返回错误 400 错误请求并带有消息

参数 id 的无效数据“未定义”

知道 api 中的getProduct方法可以完美运行。

服务.ts

getProduct(ID: number): Observable<any> {
  // console.log('ID', ID)
  return this.http.get(environment.api+'/products/' + JSON.stringify(ID)) as Observable<Product[]>;
}

组件.ts

searchIdAction(id: number){
  return this.venteService.getProduct(id).subscribe(
    product => {
      // console.log('product', product);
      this.product = product;
    },
  )
}

组件.html

<clr-input-container *ngIf="options == 1">
  <label>Recherche:</label>
  <input clrInput placeholder="recherche  par id ..." type="number"  (keyup.enter)="searchIdAction(modelProduct.id)"/>
  <!-- name="name" [(ngModel)]="modelProduct.id"   -->
</clr-input-container>

需要你的帮助。 提前致谢

Answer 1

根据您的代码，我会说您的输入缺少一些模型绑定，因此，您的 id 始终未定义。 Angular 无法知道您想将输入的值放入modelProduct.id 。

您应该使用在您的输入下方注释的ngModel ，或者如果您不需要存储此值，则直接访问输入值：

<input #myInput clrInput placeholder="recherche  par id ..." type="number"  (keyup.enter)="searchIdAction(myInput.value)"/>

Answer 2

解决了。 我希望能帮助别人

<input name="idInput" [(ngModel)]="idInput" type="text" (keyup)="searchProduct(idInput)" clrInput placeholder="recherche  par nom ..." />