Angular сделать запрос на клавишу Нажмите

Question

Как сделать HTTP-запрос на событие нажатия клавиши с вводом, на данный момент я получаю неопределенные в результате.

код ниже

app.component. html

<input
  id="search"
  type="text"
  placeholder=" search"
  value=""
  (keyup.enter)="searchData()"
  name="search"
/>

app.component.ts

  searchData(value: string) {

    this.results = this.googleService.getGoogle(value)
      .subscribe(x => {

        this.Data = x.items;
        console.log('Data', this.Data);
      }
  }

Answer 1

Передайте введенное значение из цели события:

<input id="search" type="text" placeholder=" search" value=""
            (keyup.enter)="searchData($event.target.value)" name="search" />

И проверьте, существует ли значение перед выполнением вызова:

searchData(value: string) {
  if (!value) {
    return;
  }

  this.results = this.googleService.getGoogle(value)
     .subscribe(x => {
       this.Data = x.items;
       console.log('Data', this.Data);
 }

Answer 2

Вы можете добавить [(ngModel)]="search"

Попробуйте вот так:

 <input id="search" type="text" placeholder=" search" 
           [(ngModel)]="search" (keyup.enter)="searchData(search)" name="search" />

.ts

searchData(value: string) {
   this.results = this.googleService.getGoogle(value)
    .subscribe(x = > { this.Data = x.items;
     console.log('Data', this.Data);
}

Рабочая демонстрация

Answer 3

Вы забыли добавить входное значение в качестве параметра функции searchData

Проверьте, как это сделать в документации Angular:

https://angular.io/guide/user-input#key -event -фильтрование с помощью ключа

При таком подходе вы должны изменить свой код следующим образом:

app.component. html

 <input #inputField id="search" type="text" placeholder=" search" value=""
            (keyup.enter)="searchData(inputField.value)" name="search" />

app .component.ts

    searchData(value:string) { 
        this.results = this.googleService.getGoogle(value)
        .subscribe(x = > { this.Data = x.items;
         console.log('Data', this.Data);
    }

Убедитесь, что мы передаем значение ввода в функцию searchData через ссылки на шаблоны: https://angular.io/guide/user-input#get -user-input-from-a-template-reference -переменный

Answer 4

Вы можете создать локальную переменную и передать входное значение в вашу функцию.

<input
  #inputEl
  id="search"
  type="text"
  placeholder=" search"
  value=""
  (keyup.enter)="searchData(inputEl.value)"
  name="search"      
/>

Теперь вы можете увидеть входное значение в функции searchData