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有關。 請正確編輯你的標題

Answer 2

您嘗試建立到_userData.login的數據綁定，而不是_userData

我看到兩個可能的錯誤：

第一： -帕特里克已經寫，你的數據異步到達，這意味着_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>