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() 转换为但没有任何改变。）

@编辑： 另一个类，它工作的地方是：

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

用户数据是异步传入的，这意味着它之前是undefined。 这是 Angular 会抛出异常的时候，因为你做了 undefined.login

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

试试这个：

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

您也可以使用包装 *ngIf 例如

顺便说一句，这与打字稿无关，但与 angular2 和 javascript 无关。请正确编辑您的标题

Answer 2

您尝试建立与_userData.login 而不是_userData 的数据绑定

我看到两个可能的错误：

首先： - 正如 Patrick 已经写的那样，您的数据是异步到达的，这意味着当您尝试建立数据绑定时 _userData.login 未定义，因为 _userData 未定义（并且没有默认的空值）。因此，数据绑定失败，当您稍后更新它时，您将不会被通知/获得任何更新 - 但是，您的第二个示例有效，因为 _name 和 _login 不是未定义的，而是填充了它们的 NULL 值（我猜是一个空字符串）。因此，数据绑定实际上已成功建立

第二： - 第二个可能的错误是对象引用和对象属性的绑定。 - 根据更改侦听器的实现方式，obj1 = newObject 和 obj1.attr1 = newValue 实际上是不同的。因此，仅更改对象本身不会触发单个属性上的更改侦听器。

不过，我敢打赌这是第一种可能性。您可以通过在构造函数中使用空对象初始化 User 对象来测试...

Answer 3

尝试在<p> 标签前添加类似这样的内容：

<div *ngFor="let uData of _userDat;">

然后

<p>{{uData.login}} 
</p></div>

或

<div *ngIf="user">
<p>{{_userDat.login}}</p>

Answer 4

使用 ? 进行安全导航。

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