如何从文本框中获取输入值？

Question

我正在开发搜索功能。但是，我似乎无法从文本框中获取值。

搜索栏组件

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit {

  searchQuery: HTMLElement;
  searchQuerystr: string;

  constructor() { }

  ngOnInit() { }

  getinput(): void {

    this.searchQuerystr = document.getElementById('input').innerHTML;
    console.log(this.searchQuerystr);
  }
}

搜索栏 HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<!-- The form -->
<div>
<form class="searchbar">
  <input type="text" id="input" placeholder="Search movies..">
  <button type="submit" (click)="getinput()"><i class="fa fa-search"></i></button>
</form>
<app-searchresult [searchQuerystr]='searchQuerystr'></app-searchresult>
</div>

我正在尝试将搜索查询发送到子组件

搜索结果组件

@Component({
  selector: 'app-searchresult',
  templateUrl: './searchresult.component.html',
  styleUrls: ['./searchresult.component.css']
})
export class SearchresultComponent implements OnChanges {
  @Input() searchQuerystr: string;

  searchResult: IRootResult[] = [];
  movie: IMovie;
  selectedMovie: IMovie;
  query: string;

  constructor(private _searchresultservice: SearchresultService) { }

  ngOnChanges() {
    // this.searchQuerystr = this.query;
    if (this.searchQuerystr) {
      this._searchresultservice.SearchDatabase(this.searchQuerystr)
        .subscribe(searchResult => {
          this.searchResult = searchResult;
        },
          error => console.log(error)
        );
    }
  }

  onSelect(movie: IMovie): void {
    this.selectedMovie = movie;
    window.setTimeout(function () { window.scrollTo(0, 1665); }, 300);
  }
}

由于来自文本框的输入未定义，我收到未定义的错误。 有关如何解决此问题的任何建议？

Answer 1

在SearchBar HTML 中使用ngModel：

...
<input [(ngModel)]="searchQuerystr" type="text" id="input" placeholder="Search movies..">
...