angular - 如何将参数从 UI 传递到 graphql 以获取数据

Question

我有一个graphQl url，我可以从后端获取数据。但是，目前的问题是我正在提供客户的硬编码 id 来获取数据。我想创建一个输入框，然后允许用户通过输入客户 ID 来获取任何客户记录。当前用于获取客户记录的硬编码代码：

ngOnInit() {
this.apollo
.watchQuery({
  query: gql`
    {
      findCustomer(id: "UF2aLa1L687") {
        id
        customerType
      }
    }
  `,
})
.valueChanges.subscribe(result => {
  this.customer = result.data ;
  this.loading = result.loading;
  this.error = result.errors;
  console.log('Customer Info', this.customer);
  console.log('Loading', this.loading);
  console.log('Error', this.error);

});

}

如何从 UI 传递值，我需要类似于使用 ngModel 的角度双向绑定的东西。我尝试了这段代码，但我收到了未终止的字符串错误。

  searchByCustomerIdGraphQL() {
console.log(this.customerIdValue);
this.isLoadingResults = true;
this.apollo.watchQuery({
  query: gql`
  {
    findCustomer(id : "` + this.customerIdValue + `") {
      id
    }
  }
  }`
}).valueChanges.subscribe( result => {
  this.customerSearchRecord = result.data;
  this.loading = result.loading;
  this.error = result.errors;
});
}

有人可以帮我弄清楚如何传递值吗？

标签： angulartypescriptgraphqlapollo