2017-05-29 72 views
0

我正在開發一個Azure搜索的Angular4應用程序。我需要打電話按照搜索字符串獲取產品。 的HTML是:Angular4與Azure搜索搜索字符串不起作用

<input name="searchQuery" class="form-control" id="" [(ngModel)]="query"> 
<button class="btn btn-default" type="submit" [routerLink]="['/search', query]" (click)="search()">Suchen</button> 

搜索組件:

export class SearchResultQueryComponent implements OnInit { 
    public query: string; 
    private products: Product[];  

    @Output() searchEvent: EventEmitter<Product[]> = new EventEmitter(); 
    private searchTerms = new Subject<string>(); 

    constructor(private route: ActivatedRoute,) { 
    this.products = []; 
    } 

    ngOnInit() { 
    this.route.params.subscribe(params => { 
     this.query = params.query; 
    }); 
    } 

    search() { 
    if (this.query != null && this.query !== '' && this.query.length !== 0) { 
     this.searchTerms.next(this.query); 
     this.azureSearchApiService.search(this.searchTerms, ['brand'], 0) 
     .subscribe(p => { 
      this.products = p.value; 
     }); 
     this.searchEvent.emit(this.products); 
    } else { 
     return; 
    } 
    } 
} 

父組件:

searchResult(products: Product[]) { 
    if (this.products != null) { 
     this.products = products; 
    } 
    } 

搜索服務:

headers = new Headers(); 

    constructor(private http: Http, private translate: TranslateService) { 
    this.headers.append('Content-Type', 'application/json'); 
    this.headers.append('api-key', '73E96D367A256255E88DA72931E4CD72'); 
    } 
search(terms: Observable<string>, facets: string[], page: number) { 
    return terms 
     .distinctUntilChanged() 
     .switchMap(term => this.searchEntries(term, facets, page)); 
    } 

    searchEntries(term, facets: string[], page: number) { 
    const requestOptions = new RequestOptions({ headers: this.headers }); 
    const searchOptions = this.searchOptions(term, facets, page); 
    return this.http 
     .post('the url....', searchOptions, requestOptions) 
     .map(res => res.json()) 
    } 

    searchOptions(searchTerm: string, facets: string[], page: number): any { 
    const options = { 
     search: '*' + searchTerm, 
     facets: [ facets.join(',')], 
     // paging 
     top: 5, 
     skip: 5 * page, 
     count: true, 
    }; 
    return JSON.stringify(options); 
    } 

問題是: 雖然搜索詞是正確的,但我總是收到相同的結果。第二個問題是我必須點擊三次按鈕才能收到結果。我不明白爲什麼?和做什麼?

任何想法可能會有所幫助。謝謝

+0

錯誤的標記可能是什麼?您的代碼表明您正在使用Azure搜索。 –

+0

是的,我正在使用天藍色的搜索對不起 –

+0

我找到了第一個問題的解決方案,我必須添加:queryType:'full'並刪除* ,但第二個我直到現在還不能解決它 –

回答

0

我找到了解決方案,我用「Redux」框架作爲有狀態列表。它適用於我。延遲是在事件發生後更新GUI