http.get()传递ID

时间:2018-05-03 11:50:40

标签: angular typescript http-get

我正在尝试通过typescript中的http.get()从URL调用获取详细信息。我检索此详细信息的URL端点是一种localhost:8001\character\1234567890,其中number是字符的ID。

如果我在浏览器上测试,则URL会正确返回所有数据。

我的问题是打字稿函数调用。 Fron HTML前面,我正在调用函数:

<a href="#{{character.id}}" (click)="characterDetail(character.id)">Read more</a>

然后,其余的功能是这些:

characterDetail(characterId: number) {
    this.asyncCharDetail = this.getCharacterDetail(characterId)
        .do(res => {
            console.log(res);
        })
        .map(res => res.results);
}



getCharacterDetail(characterId: number) {
    return this.http.get(this.characterDetailApiUrl + characterId,{})
        .map((res: Response) => res.json())
}

第一个函数的console.log(res)不会打印任何内容。 characterId和url都是正确的,但不知道不检索字符详细信息的原因。

数据检索的第二部分是在模态窗口上显示的。

编辑:这里有更多代码:

private characterDetailApiUrl = 'http://localhost:8001/character/';
....
//To save the character details from Http get.
asyncCharDetail: Observable<string[]>;

characterDetail(characterId: number) {
    console.log('Character detail for ID ' + characterId);
    this.loading = true;
    this.asyncCharDetail = this.getCharacterDetail(characterId)
        .do(res => {
            console.log(res);
            this.loading = false;
        })
        .map(res => res.results);
    console.log(this.asyncCharDetail);
}

getCharacterDetail(characterId: number) {
    return this.http.get(this.characterDetailApiUrl + characterId )
        .map((res: Response) => res.json());
}

在Html前端文件中:

<a href="" (click)="characterDetail(character.id); $event.preventDefault()">Read more</a>

3 个答案:

答案 0 :(得分:1)

您必须订阅Observable才能执行某些操作。

characterDetail(characterId: number) {
    this.getCharacterDetail(characterId)
        .do(res => {
            console.log(res);
        })
        .map(res => res.results)
        .subscribe(data => { 
           //...do something with data
        });

}

答案 1 :(得分:0)

return this.http.get(this.characterDetailApiUrl + characterId,{})

只是网址应该没问题。你能否在删除,{}后检查一下你得到了什么?所以return this.http.get(this.characterDetailApiUrl + characterId)

如果您需要完整回复,请尝试将{}替换为{ observe: 'response' }

答案 2 :(得分:0)

我已经从2改为1功能,现在我从角色中获得了一些数据。现在作为@CornelC建议工作

getCharacterDetail(characterId: number) {
    return this.http.get(this.characterDetailApiUrl + characterId)
        .subscribe(res =>
            console.log(res.json())
        );
}

现在我从前端调用该函数但需要显示一个带有检索数据的模态窗口