我有一个最奇怪的问题。
我收到一个 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;
}
但是当我尝试使用角度访问 html 中的这些字段时:
<p>{{ _userData.login }}</p>
<p>{{ _userData.name }}</p>
我在控制台中遇到一些令人讨厌的错误,例如: Error: EXCEPTION: TypeError: l__userData21 is null in [{{ _userData.login }} in UserHomeComponent@8:7]
虽然我可以清楚地看到当我在这个对象上做控制台.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>
用户数据是异步的,这意味着它之前是未定义的。这是 Angular 会抛出异常的时候,因为你做了 undefined.login
您需要做的是使用 elvis 运算符指示用户数据可能未定义。
试试这个:
<p>{{ _userData?.login }}</p>
<p>{{ _userData?.name }}</p>
或者,您可以使用包装 *ngIf 例如
顺便说一句,这与TypeScript无关,但与Angular2和JavaScript有关。 请正确编辑您的标题
您尝试建立与_userData.login
的数据绑定,而不是_userData
我看到两个可能的错误:
第一:- 正如 Patrick 已经写过的那样,您的数据是异步到达的,这意味着当您尝试建立数据绑定时_userData.login
未定义,因为_userData
未定义(并且没有默认的 null 值)。因此,数据绑定失败,以后更新时不会通知您/获得任何更新- 你的第二个例子如何工作,因为_name
和_login
不是未定义的,而是填充了它们的NULL
值(我猜是一个空字符串)。因此,数据绑定实际上已成功初始化
第二:- 第二个可能的错误是对象引用和对象属性的绑定。- 根据更改侦听器的实现方式,它实际上是obj1 = newObject
和obj1.attr1 = newValue
之间的差异。因此,仅更改对象本身不会触发单个属性的更改侦听器。
无论如何,我敢打赌这是第一种可能性。您可以通过在构造函数中使用空对象初始化 User
对象来测试这一点......
尝试在<p>
标签前面添加这样的东西:
<div *ngFor="let uData of _userDat;">
然后
<p>{{uData.login}}
</p></div>
或
<div *ngIf="user">
<p>{{_userDat.login}}</p>
使用 ? 进行安全导航。
<p>{{ _userData?.login }}</p>