如何将输入变量传递给服务 Angular

Question

I'm working on an Angular web project and finding it difficult to pass a user input field to service to get a request on an API endpoint.

so reassigning the inputKeyword in the page.component.ts to the input in the service.ts

I will need to do it the right way

page.component.html

<input id="search" type="text"  [(ngModel)]="inputKeyword" name="search" />


 <button  (click)="searchData()"> Search </button>

page.component.ts

inputKeyword :  string = ''; 


 searchData(){ 
      return this.googleService.getData().subscribe(x =>{
        this.googleData= x.items;
        console.log("input ",this.inputKeyword)
        this.inputKeyword = this.googleService.input;
        console.log(this.googleData)
       }, error => {
         console.log(error)
       })

 }

data.service.ts

input;

getData() {
    return   this.http.get('url?key='
     + environment.apiKey + '&cx=' + environment.cx + '&q=' + this.input)
  }

Answer 1

You are subscribing to the method from the service where the input property is undefined. You assign a value only in the subscription which is wrong in this case.

Your method from the service should be like this:

getData(input: string) {
   return   this.http.get('url?key='
    + environment.apiKey + '&cx=' + environment.cx + '&q=' + input)
 }

And in the component you pass the inputKeyword property as an argument to that method like so:

searchData(){ 
      return this.googleService.getData(this.inputKeyword).subscribe(x =>{
        this.googleData= x.items;
        console.log(this.googleData)
       }, error => {
         console.log(error)
       })