gpt4 book ai didi

angular - 我如何从文本框中获取输入值?

转载 作者:搜寻专家 更新时间:2023-10-30 21:48:42 27 4
gpt4 key购买 nike

我正在研究搜索功能。但是,我似乎无法从文本框中获取值。

搜索栏组件

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);
}
}

由于文本框的输入未定义,我收到未定义的错误。关于如何解决这个问题有什么建议吗?

最佳答案

SearchBar HTML 中使用 ngModel:

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

关于angular - 我如何从文本框中获取输入值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49887791/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com