Question

我正致力于通过Angular2 / TypeScript实现搜索功能。

但是我在绑定返回到视图的搜索项时遇到了一些问题。

我的组件是：

import { Component } from '@angular/core';
import { SearchService } from '../services/search.service';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import "rxjs/add/operator/debounceTime";
import "rxjs/add/operator/distinctUntilChanged";
import 'rxjs/add/operator/switchMap';

@Component({
  selector: 'search',
  templateUrl: './app/views/search.component.html',
  providers: [SearchService]
})

export class SearchComponent {
  items: Observable<string[]>;
  errorMsg: string;

  private searchTermStream = new Subject<string>();

  searchConfluence(term : string) {
    // Send the search term into the Observable stream
    this.searchTermStream.next(term);
  }

  ngOnInit(): void {
    this.items = this.searchTermStream
      .debounceTime(300)
      .distinctUntilChanged()
      .switchMap(term => this.searchService.titleSearch(term));
  }

  constructor(private searchService: SearchService) {}
}

我的观点如下：

<h1>Search</h1>
<input #term (keyup)="searchConfluence(term.value)" />
<ul style="list-style: none">
  <li *ngFor="let item of items | async">
    {{item.title}}
  </li>
</ul>

我的搜索服务：

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

@Injectable()
export class SearchService {

  private searchUrl = URL_HERE;

  constructor(private http: Http) {}

  titleSearch(params: string): Observable<string[]> {
    let options = new RequestOptions({ headers: this.header});
    let requestString = `term=${params}`;
    return this.http.get(`${this.searchUrl}?${requestString}`, options)
      .map(this.getData)
      .catch(this.handleError);
  }

  private getData(resp: Response) {
    let body = resp.json();
    console.log(body.results);
    return body.results || [];
  }

  private handleError(error: Response | any) {
    let errMsg: string;
    if (error instanceof Response) {
      const body = error.json() || '';
      const err = body.error || JSON.stringify(body);
      errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
    } else {
      errMsg = error.message ? error.message : error.toString();
    }
    return Observable.throw(errMsg);
  }
}

服务器返回的响应如下：

 [Object, Object ... ]

其中每个Object是一个JSON对象。这就是我期待的回应。

我检查了网络跟踪，并且HTTP请求正在向正确的位置发射，我也得到了结果（同样，所有通过网络跟踪查看）。我无法在我的视图中查看任何结果（列表根本没有显示）。

编辑：最后一次编辑，但我可能遗漏了一个关键细节;我的Angular2应用程序不在典型的浏览器中，但实际上包含在ElectronJS应用程序中。我不确定这是否有所不同。

Answer 1

经过一天的摆弄，我得到了这个问题的答案。

看起来Electron的API没有像网络浏览器那样快速更新，所以我按照here中的解决方案进行了更新。

基本上我在search.component.ts课程中这样做：

ngOnInit(): void {
  this.searchTermStream
    .debounceTime(300)
    .distinctUntilChanged()
    .switchMap(term => this.searchService.titleSearch(term))
    .subscribe((result) => { 
      this.items = result;
      this.cdRef.detectChanges();
    });
  }

瞧，一切都正确更新，我有一个很好的搜索结果列表:)。

Angular2 Observable没有正确绑定

1 个答案: