2017-05-29 73 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