Question

我正在制作电影数据库，我正在使用MovieDb api。我目前有20个随机生成的电影没有用户输入，所以我知道api正在工作。

我的HTML有一个输入来接收电影名称和一个按钮来激活方法：

<button id="searchBarButton" (click)="sendRequest(MovieTitle)">Search</button>
<input id="MovieTitle" class= "searchBar" type="text" #MovieTitle>

我的.ts搜索组件。我正在设置我的服务订阅，这将允许我使用API并搜索它：

sendRequest(value)
{
// Need to route the shit outta this
this._iMDBService.searchMDBMovie(this.MovieTitle).subscribe( shows => {
  this.searchedShows=shows.results;
  this.router.navigateByUrl("/details");
},
  error=>this.errorMessage=<any>error);
}

正如您所看到的，我正在尝试从HTML上发送用户收集的电影标题，并使用.ts文件将其发送到下面的服务

@Injectable()
    export class iMDBService {
    private _iMDBURL: string = 'https://api.themoviedb.org/3/';

    constructor(private _http: HttpClient) { }

    searchMDBMovie(MovieTitle) : Observable<any>{
        return this._http.get<any>(this._iMDBURL + 'search/movie?api_key=MyWorkingApiKey&language=en-US&query=' + MovieTitle + '&page=1&include_adult=false')
        .do(data => console.log('All: ' + JSON.stringify(data)))
        .catch(this.handleError);
    }

    private handleError(err: HttpErrorResponse) {
        console.log(err.message);
        return Observable.throw(err.message);
    }
}

我的问题：api正在运行但是我需要在api请求之间的电影标题，HTML和.ts没有发送到service.ts，我如何将titlename带到service.ts文件？< / p>

Answer 1

模板变量

#MovieTitle

指的是输入元素本身，而不是它的值。要获得您需要的价值：

<button id= "searchBarButton" (click)= "sendRequest(MovieTitle.value)">Search</button>

并在组件方法中使用该值，而不是尝试再次冗余访问tempalte变量。

简单的控制台日志记录/调试将更快地解决这些问题。

Answer 2

好吧，我请客人进行这些小修改以使其有效：

<button 
  id= "searchBarButton" 
  (click)="sendRequest(MovieTitle.value)">
  Search
</button>
<input 
  id="MovieTitle" 
  class="searchBar" 
  type="text" 
  #MovieTitle />


sendRequest(value) {
  this._iMDBService.searchMDBMovie(value).subscribe( shows => {
  ...

建议更好地进行用户互动：

<button 
  id= "searchBarButton" 
  (click)="sendRequest(MovieTitle.value)">
  Search
</button>
<input 
  id="MovieTitle" 
  class="searchBar" 
  type="text" 
  #MovieTitle
  (keyup.enter)="sendRequest(MovieTitle.value)" />

当用户点击输入时点击(keyup.enter)键时，sendRequest会调用Enter方法。

Angular 4 - 在组件之间传递字符串

2 个答案: