Typescript无法访问JSON对象(Angular2)

Question

我有一个最奇怪的问题.

我正在收到一个JSON对象

{"login":"admin","name":"Admin"}

而我在代码中所做的是:

private _userData: User;
...
private getUserData() {
    this._userInfoService.getUserInfo()
        .subscribe(
            data => {
                this._userData = data.json(); // (using <User> data.json() changes nothing
            },
            err => alert(err)
        );
}

用户类型的位置

export interface User {
    login: string;
    name: string;
}

但是,当我尝试使用angular访问html中的那些字段时:

<p>{{ _userData.login }}</p>
<p>{{ _userData.name }}</p>

我在控制台中遇到了一些令人讨厌的错误: Error: EXCEPTION: TypeError: l__userData21 is null in [{{ _userData.login }} in UserHomeComponent@8:7]

虽然我可以清楚地看到我在这个对象上做console.log的时候: Object { login: "admin", name: "Admin" }

我和其他班级完全一样,它在那里工作.更有趣的是,当我稍微更改代码时,如下所示:

private _name: string;
private _login: string;
...
private getUserData() {
    this._userInfoService.getUserInfo()
        .subscribe(
            data => {
                this._name = (<User> data.json()).name;
                this._login = (<User> data.json()).login;
            },
            err => alert(err)
        );
}

并查看:

<p>{{ _login }}</p>
<p>{{ _name }}</p>

一切都很完美!我完全不知道发生了什么(尝试将data.json()转换为但是什么都没有改变.)

@Edit:另一个类,它的工作原理是:

export interface LoginData {
    access_token: string;
    token_type: string;
    refresh_token: string;
    expires_in: number;
    scope: string;
}


private _loginData = <LoginData> JSON.parse(sessionStorage.getItem("loginData")); //tried this also with User, doesn't work

并在视图中:

<p>access_token: {{ _loginData.access_token }}</p>
<p>token_type: {{ _loginData.token_type }}</p>
<p>refresh_token: {{ _loginData.refresh_token }}</p>
<p>expires_in: {{ _loginData.expires_in }}</p>

Answer 1

用户数据以异步方式进入,这意味着之前未定义.这是因为你做了未定义的 .login,因此angular会抛出异常

您需要做的是使用elvis-operator指示userData可能未定义.

试试这个:

<p>{{ _userData?.login }}</p>
<p>{{ _userData?.name }}</p>

或者你也可以使用包装*ngIf

顺便说一下这与打字稿无关,而是与angular2和javascript有关.请正确编辑你的标题