2017-05-29 24 views
0

私はAzure SearchでAngular4アプリケーションを開発しています。私は、検索文字列に基づいて製品を入手するために電話する必要があります。 HTMLは次のとおりです。Angular4 with 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); 
    } 

問題は次のとおりです。 検索用語は正しいが、私は常に同じ結果を受け取る。第2の問題は、結果を受け取るためにボタンを3回クリックしなければならないということです。なぜ私は理解できないのですか?何をすべきか?

任意のアイデアが役に立ちます。ありがとうございました

+0

間違ったタグはありますか?コードはAzure Searchを使用していることを示しています。 –

+0

はい紺碧の検索を使用しています申し訳ありません –

+0

最初の問題の解決策を見つけました。私はqueryType: 'full'を追加し、* を削除する必要がありますが、2番目の問題は今まで解決できませんでした –

答えて

0

解決策が見つかりました。ステートフルリストとして「Redux」フレームワークを使用しました。それは私のために働く。イベント後にGUIを更新する際の遅延があった

関連する問題