Question

我正在使用Azure搜索开发Angular4应用程序。我需要打电话来根据搜索字符串获取产品。 HTML是：

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

问题是：虽然搜索词是正确的，但我总是收到相同的结果。第二个问题是我必须单击三次按钮才能收到结果。我不明白为什么？怎么办？

任何想法都可能有所帮助。谢谢

Answer 1

我找到了解决方案，我使用“Redux”框架作为有状态列表。它对我有用。延迟是在事件发生后更新GUI

Angular4与Azure搜索搜索字符串不起作用

1 个答案: