Angular2 Observable 绑定(bind)不正确

Question

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

但是，我在绑定(bind)返回到 View 的搜索项时遇到了一些问题。

我的组件是这样的:

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 请求被触发到正确的位置并且我也得到了结果(同样，所有这些都是通过网络跟踪查看的)。我无法在我的 View 中查看任何结果(该列表根本没有出现)。

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

Answer 1

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

看起来 Electron 的 API 更新速度不如 Web 浏览器那么快，所以我遵循了 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();
    });
  }

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