类型错误：无法使用 Angular 2 读取未定义的属性'UserName'

Question

我想在我的 angular 2 应用程序中显示当前用户的用户名。后端是使用 .net core Web API 开发的。

我编写了此代码，但在控制台中收到此错误：

类型错误： 无法读取未定义的属性"用户名">

类身份验证服务

import {Injectable, EventEmitter} from "@angular/core";
import {Http, Headers, Response, RequestOptions} from "@angular/http";
import {Observable} from "rxjs/Observable";
import {AuthHttp} from "./auth.http";
import {User} from "./user";
@Injectable()
export class AuthService {
authKey = "auth";
constructor(private http: AuthHttp) {
}
// Persist auth into localStorage or removes it if a NULL argument is given
setAuth(auth: any): boolean {
if (auth) {
localStorage.setItem(this.authKey, JSON.stringify(auth));
}
else {
localStorage.removeItem(this.authKey);
}
return true;
}
// Retrieves the auth JSON object (or NULL if none)
getAuth(): any {
var i = localStorage.getItem(this.authKey);
if (i) {
return JSON.parse(i);
}
else {
return null;
}
}
// Returns TRUE if the user is logged in, FALSE otherwise.
isLoggedIn(): boolean {
return localStorage.getItem(this.authKey) != null;
}
**get() {
return this.http.get("api/Accounts")
.map(response => <User>response.json());
}**
}

我确定用户已登录，因为我可以读取他的令牌。

网页接口方法

/// <summary>
/// GET: api/accounts
/// </summary>
/// <returns>A Json-serialized object representing the current account.</returns>
[HttpGet()]
public IActionResult Get()
{
var id = GetCurrentUserId(); 
//var id = User.FindFirst(ClaimTypes.NameIdentifier).Value;
var user = DbContext.Users.Where(i => i.Id == id).FirstOrDefault();
if (user != null) return new JsonResult(new UserViewModel()
{
Type = user.Type,
UserName = user.UserName,
Email = user.Email,
DisplayName = user.DisplayName,
PhoneNumber = user.PhoneNumber,
DisplayPhoneNumber = user.DisplayPhoneNumber,
Description = user.Description
}, DefaultJsonSettings);
else return NotFound(new { error = String.Format("User ID {0} has not been found", id) });
}

打字稿中的类用户

export class User {
constructor(
public Type: number,
public UserName: string,
public DisplayName: string,
public PhoneNumber: string,
public DisplayPhoneNumber: boolean,
public Description: string,
public Password: string,
public PasswordNew: string,
public Email: string
) {
}
}

角度 2 中的组件代码

import {Component, OnInit} from "@angular/core";
import {Router, ActivatedRoute} from "@angular/router";
import {AuthService} from "./auth.service";
import {AuthHttp} from "./auth.http";
import {User} from "./user";
@Component({
selector: "home",
templateUrl: "templates/home.component.html",
//template: `<h1>Home Component</h1>`
})
export class HomeComponent {
isRegister: boolean;
currentUser: User;
constructor(
public router: Router,
public authService: AuthService,
private activatedRoute: ActivatedRoute
) {
//this.isRegister = this.authService.isLoggedIn();
//console.log(this.isRegister);
}
ngOnInit() {
if (this.authService.isLoggedIn()) {
this.authService.get().subscribe(
User => this.currentUser = User
);           
console.log(this.isRegister);
console.log(this.currentUser.UserName);               
}
}
}

代码模板 html

<div *ngIf="currentUser"><h1>{{currentUser.UserName}}</h1></div>

我不明白为什么这不起作用。

Answer 1

您尝试在解析User值之前访问this.currentUser.UserNamethis.authService.get()因为this.authService.get是异步的，所以这样做：

ngOnInit() {
if (this.authService.isLoggedIn()) {
this.authService.get().subscribe(
User => {
this.currentUser = User
console.log(this.isRegister);
console.log(this.currentUser.UserName);
});           
}
}

Answer 2

尝试替换：

currentUser: User;

如

currentUser = new User();

控制台中未定义的错误消失。