Question

我陷入了可能非常基本的问题......我只需要调用一个Web服务器并获取结果。过去在Angular 1中很容易。

这是我调用该服务的组件：

import {Component, Input, OnChanges} from "angular2/core";
import {SearchService} from "../../../services/search.service";

@Component({
  selector: "typeahead",
  providers: [SearchService],
  template: `
    {{searchSvc | json}}
  `,
})
export class TypeaheadComponent implements OnChanges {
  @Input() txt: string;
  display = false;
  searchSvc;

  ngOnChanges(changes: { [propName: string]: SimpleChange }) {
    var search = changes['txt'].currentValue;
    if (search.length > 2) {
      this.display = true;
      this.searchSvc = this._searchService.DoGeneralSearch();
    }
    else {
      this.display = false;
    }
  }

  constructor(private _searchService: SearchService) {

  }
}

这是我正在使用的服务：

import {Injectable, OnInit} from 'angular2/core';
import {Http, HTTP_PROVIDERS, Response} from 'angular2/http';
import 'rxjs/add/operator/map';

@Injectable()
export class SearchService implements OnInit {
  generalSearchResults;

  ngOnInit() {
    this.DoGeneralSearch();
  }

  constructor(private _http: Http) {
  }

  DoGeneralSearch() {
    this._http.get('http://localhost:7000/search?q=chem')
      .map((res: Response) => res.json())
      .subscribe(
        data => {
          this.generalSearchResults = data
        },
        err => console.log(err),
        () => console.log(this.generalSearchResults)
      )
  }
}

基本上我只希望看到我的结果显示在我的模板中。结果我只能看到（）=＆gt;调用console.log（this.generalSearchResults），我在控制台上注意到了这一点。我看到结果和结果是正确的，jSon对象是正确的。

可能有什么不对或丢失？

Answer 1

您需要从DoGeneralSearch返回observable并在组件中订阅：

export class SearchService {
  constructor( private _http: Http ) {
  }

  DoGeneralSearch(){   
    return this._http.get('http://localhost:7000/search?q=chem')
     .map((res:Response) => res.json());
  }
}

为此，您可以利用async管道：

@Component({
  selector: "typeahead",
  providers: [SearchService],
  template : `
    {{searchSvc | async | json}}
  `
})
export class TypeaheadComponent implements OnChanges {
  @Input() txt: string;
  display = false;

  constructor(private _searchService: SearchService) {
  }

  ngOnChanges(changes: {[propName: string]: SimpleChange}) {
    var search = changes['txt'].currentValue;
    if(search.length > 2) {
        this.display = true;
        this.searchSvc = this._searchService.DoGeneralSearch();
    }
    else {
      this.display = false;
    }
  }
}

Answer 2

export class SearchService {
  constructor( private _http: Http ) {
  }

  DoGeneralSearch(){   
    return this._http.get('http://localhost:7000/search?q=chem')
     .map((res:Response) => res.json());
  }
}



this._searchService.DoGeneralSearch
                   .subscribe(res=>{
                       this.searchSvc =res;  //make sure you get required data here.
                       console.log('bye');
                    },
                    (err)=>console.log(err),
                    ()=>console.log("Done")
                    );

Angular 2 Basic http服务请求

2 个答案: