0
私は家具に関する情報を私に提供するバックエンドサーバーを持っています。私はAngular（Typescript）でFrontendサービスを利用しており、ユーザーは関連する単語を入力し、サービスは類似の単語を提案します。角度4を使用して検索バーが空白の場合は表示しないでください
問題
ユーザーが単語を削除し、提案はまだ現れ検索バーが空です。検索バーが空のときに候補を削除するにはどうすればよいですか？
注射サービス
@Injectable()
export class SearchService {
apiRoot: string = 'myEndPoint';
constructor(private http: Http) {
}
search(term: string): Observable<SearchItem[]> {
// HTTP GET with parameter JSON as mentioned below(inpjson)
let inpjson = {'keyword': term, 'language': 'en'}
let apiURL = `${this.apiRoot}?inputAsJson=${JSON.stringify(inpjson)}`;
return this.http.get(apiURL)
.map(res => {
return res.json().conceptOverview.map(item => {
return new SearchItem(
item.url,
item.translatedURL
);
});
});
}
}
HTTPレスポンス
{
'searchTyp': 'ExplorativeSearch',
'conceptOverview' : [
{
'url': 'someurl1',
'translatedURL': 'somestuff1'
},
{
'url': 'someurl2',
'translatedURL': 'somestuff2'
}
....
]
}
AppComponent
class AppComponent {
private loading: boolean = false;
private results: Observable<SearchItem[]>;
private searchField: FormControl;
constructor(private http: SearchService) {
}
ngOnInit() {
this.searchField = new FormControl();
this.results = this.searchField.valueChanges
.debounceTime(400)
.distinctUntilChanged()
.do(_ => this.loading = true)
.switchMap(term => this.http.search(term))
.do(_ => this.loading = false)
}
doSearch(term: string) {
this.http.search(term)
}
}
私が提案したクエリをクリックすると検索バーを自動補完するために、角度に探さなければならないだけの簡単な質問を、？ liのクリックで –
、オブジェクトを取得 –