Angular 2个基本的http服务请求
Angular 2 Basic http service request
我遇到了一些可能非常基本的问题...我只需要调用网络服务器并获取我的结果。在 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)
)
}
}
基本上我只是希望看到我的结果显示在我的模板中。
当 () => console.log(this.generalSearchResults) 被调用时,我只能看到结果,我在控制台上注意到了这一点。我看到了结果,结果是正确的,jSon 对象是正确的。
可能有什么错误或缺失?
您需要 return 来自 DoGeneralSearch
的可观察对象并改为订阅组件:
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;
}
}
}
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 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)
)
}
}
基本上我只是希望看到我的结果显示在我的模板中。 当 () => console.log(this.generalSearchResults) 被调用时,我只能看到结果,我在控制台上注意到了这一点。我看到了结果,结果是正确的,jSon 对象是正确的。
可能有什么错误或缺失?
您需要 return 来自 DoGeneralSearch
的可观察对象并改为订阅组件:
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;
}
}
}
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")
);