首页 文章

在角度2中订阅不是函数错误

提问于
浏览 次
2

我创建了一个服务来获取搜索结果 . 函数名是getSearchResults，用于获取搜索结果，我有一个组件，我订阅了函数'getSearchResults . 我还有一个名为'searchResults'的Observable，我订阅它以获得我的组件中的实际结果 . 当我订阅searchResults变量时，我得到订阅而不是函数错误 . 有时它工作正常但是当我点击浏览器上的后退按钮时它会显示错误 .

服务：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';
import { Http, Response, Headers, RequestOptions, URLSearchParams } from '@angular/http';
import { Router } from '@angular/router';

import { AppConfig } from '../app.config';

@Injectable()
export class SearchResultsService {

  // Observable string source
  private searchResultsSource = new BehaviorSubject<any>({"results": "null"});

  // Observable string stream
  searchResults: Observable<any>;

  constructor(
    private router: Router,
    private http: Http,
    private config: AppConfig) {

    this.searchResults = this.searchResultsSource.asObservable();

    }

  getSearchResults(query: string, field: string) {
    if(sessionStorage.getItem('searchResults')) {
      sessionStorage.removeItem('searchResults');
      console.log('removed');
    }

    else console.log('not removed');

    if (field == null || !field)
      field = '_all';

    if (query == null || !query)
      return;

    let token = JSON.parse(localStorage.getItem('authDetails')).accessToken;
    let headers = new Headers({ 'Authorization': token,
      'Access-Control-Allow-Origin': '*'});
    let params: URLSearchParams = new URLSearchParams();
    params.set('q', query);
    params.set('f', field);
    let options = new RequestOptions({ headers: headers,
      search: params
    });
    return this.http.get(this.config.apiUrl+'/search', options)
      .map((response: Response) => {
        console.log('response received');
        this.searchResults = response.json();
        sessionStorage.setItem('searchResults', JSON.stringify(this.searchResults));
        console.log((response.json()).results);
        this.emitSearchResults();
      },
      error => console.log(error));
  }

  emitSearchResults(): void {
    this.searchResultsSource.next(this.searchResults);
  }
}

零件：

import { Component, OnInit, OnDestroy, DoCheck } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import 'rxjs/add/operator/map';

import { SearchResultsService } from '../services/search-results.service';

@Component({
  moduleId: module.id,
  selector: 'app-search-results',
  templateUrl: './search-results.component.html',
  styleUrls: ['./search-results.component.css']
})
export class SearchResultsComponent implements DoCheck, OnInit {

  public searchResults;
  public searchResultsCount: number = 0;
  public subscription;
  public field: string;
  public query: string;

  constructor(
    private searchResultsService: SearchResultsService,
    private router: Router,
    private route: ActivatedRoute) { 

    console.log('on top');

    if(JSON.parse(sessionStorage.getItem('searchResults')))
      this.searchResults = JSON.parse(sessionStorage.getItem('searchResults'));

    this.searchResultsService.searchResults.subscribe(
      (results) => 
        this.searchResults = results);

    this.searchResults = this.searchResultsService.searchResults;

    this.field = this.route.snapshot.params['field'];
    this.query = this.route.snapshot.params['query'];

    console.log('in search results constructor');
    console.log(this.searchResults);
  }

  ngOnInit() {
    this.searchResultsService.getSearchResults(this.query, this.field).subscribe(
      (data) => {
        console.log('subs work');
      },
      (error) => {
        console.log('subs ot work');
      });
  }

  onClick() {
    this.subscription.unsubscribe();
    console.log('destroyed');
  }

  ngDoCheck() {
  }

}
angular angular2-observables

3 回答

  • 0

    它可能与您定义订阅的方式有关 . 试试这个

    import { Subscription } from 'rxjs/Rx';
...
public subscription: Subscription;
...

    然后它应该工作得很好 .

    我还注意到您正在尝试订阅不存在的方法 . 您的服务中只有 emitSearchResults(): void 和 getSearchResults .

    我还将变量定义为不在构造函数内但在类似这样的类中的observable

    searchResults: Observable<any> = this.searchResultsSource.asObservable();
    回复于
  • 0

    问题是我使用相同的变量作为observable以及存储搜索结果 . 我创建了另一个变量来存储搜索结果，现在修复了错误 .

    回复于
  • 0

    @NitinSingh我没有足够的代表来添加评论，所以我必须在这里回复 .

    问题在于http.get调用的响应映射 . 不要 this.searchResults = response.json(); 来设置 this.searchResults 的值 . searchResults正在观察searchResultsSource，因此您可以通过在.map中执行 this.searchResultsSource.next(response) 来更改观察值 .

    它看起来像这样

    return this.http.get(this.config.apiUrl+'/search', options)
      .map((response: Response) => {
        searchResultssource.next(response)
      },
      error => console.log(error));

    也不应在构造函数中声明 this.searchResults = this.searchResultsSource.asObservable(); .

    回复于

相关问题