Angular 2 Http GET 的问题

Posted 2023-03-13

【中文标题】Angular 2 Http GET 的问题

【英文标题】：Problems with Angular 2 Http GET

【发布时间】：2016-12-25 12:03:48

【问题描述】：

我正在努力使用 Angular 2 执行 http 获取请求。我已经制作了一个包含我想用我的 TeacherInfo 类“获取”的 JSON 信息的文件，并使用它来显示帐户组件的信息，该组件是在路由中使用。

如果我点击这个元素的 routerLink 什么都不会显示，如果我切换到另一个 routerLink 则两者都没有（之前有，所有 routerLinks 都可以正常工作）

文件：TeacherInfo.service.ts

import Injectable, OnInit from '@angular/core';
import  Http, Response , Headers from '@angular/http';
import  account  from '../components/account.component';
import Observable from "rxjs";
@Injectable()
export class TeacherInfo 


constructor ( private http : Http) 

private url = '../test.json';

getInfo()

    return this.http.get(this.url)
        .toPromise()
        .then(response => response.json().data as account );

文件：account.component.ts

import Component, OnInit from '@angular/core';
import  TeacherInfo  from '../services/TecherInfo.service';

@Component(
template:`
    <h2>This is not ready jet!</h2>
    <p>
        Willkommen name! <br/>
        E-mail: email<br/>
    </p>
    `
)

export class account implements OnInit

public id : number;
public name : string;
public email: string;
private acc : account;

constructor(private accountinfoservice : TeacherInfo) 



getInfo() 
    this.accountinfoservice.getInfo()
        .then(( info : account )  => this.acc = info );



ngOnInit () 
    this.getInfo();
    if ( this.acc != null ) 
        this.id = this.acc.id;
        this.name = this.acc.name;
        this.email = this.acc.email;
    else 
        console.log("there is no data! ");
    

最后是 test.json：

"id" : "1",
"name": "testname",
"email": "testemail"
 

我正在使用最新版本的 node 和 npm，并且在浏览器控制台中没有编译错误和无关的错误（其他 SPA 的部分尚未准备好）。存在可观察的实现是因为起初我尝试这样做，并得出结论，一开始使用 Promise 更容易。

【参考方案1】：

我订阅了简单的 json 获取

调用代码

ngOnInit(): void 
   this._officerService.getOfficers()
    .subscribe(officers => this.officers = officers),
    error => this.errorMessage = <any> error;

和服务代码

import  Injectable  from 'angular2/core';
import  Http, Response  from 'angular2/http';
import  Observable  from 'rxjs/Observable';

import  Officer  from '../shared/officer';

@Injectable()

export class OfficerService

private _officerUrl = 'api/officers.json';

constructor(private _http: Http)   

getOfficers() : Observable<Officer[]>
    return this._http.get(this._officerUrl)
        .map((response: Response) => <Officer[]>response.json())
        .catch(this.handleError);


private handleError(error: Response)
    console.error(error);
    return Observable.throw(error.json().error || 'Server error');

这会将数据作为数组返回并将其转换为正确的类型，尽管您也可以使用 any 并返回 [0] 如果您只是期望一个。

希望有帮助

【讨论】：

什么时候需要在 map Observable 中使用 return？