Typescript無法訪問JSON對象（Angular2）

我收到一個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; 
}

但是，當我m試圖訪問這些領域的HTML與角：

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

我得到一些討厭的錯誤控制檯，如： Error: EXCEPTION: TypeError: l__userData21 is null in [{{ _userData.login }} in [email protected]: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>

來源

2016-03-16 user3212350

這個'.json（）'函數來自哪裏？我知道你嘗試過'JSON.parse（）'，但仍然... –

用戶數據進入異步這意味着它是未定義之前。這是當因爲你未定義的.login

你將不得不做的是表明用戶數據可以通過使用貓王運營商是不確定的角度會拋出異常。

試試這個：

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

或者你可以使用一個包裝* ngIf例如

BTW這有沒有關係打字稿，但angular2和JavaScript。請編輯您的標題正確

來源

2016-03-16 12:47:42

你試圖建立一個數據綁定到_userData.login，不計算_userData

我看到了兩個可能的錯誤：

第一： - 帕特里克已經寫了，你的數據到達異步，這當您嘗試建立數據綁定時，表示_userData.login未定義，因爲_userData未定義（且沒有默認空值）。因此，數據綁定失敗，你將不會被告知/得到任何更新，當您後更新它 - 你的第二個例子的作品，怎麼過，因爲_name和_login不是不確定的，但充滿了他們的NULL值（我猜想一個空字符串）。由於數據綁定實際上已成功建立，因此

第二個： - 第二個可能的錯誤是綁定對象引用和對象屬性。 - 根據更改偵聽器的實現方式，它實際上是obj1 = newObject和obj1.attr1 = newValue之間的差異。因此只更改對象本身不會觸發單個屬性上的更改偵聽器。

如何，我敢打賭這是第一種可能性。您也可以用在構造一個空對象初始化User對象測試這個...

來源

2016-03-16 13:36:06 letmejustfixthat

嘗試增加這樣的事情在<p>標籤的前面：

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

然後

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

或

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

來源

2017-10-24 09:14:23

使用？爲安全導航。

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

來源

2017-10-24 10:22:06

Typescript無法訪問JSON對象（Angular2）

回答

相關問題