TypeError：无法读取Angular 2未定义的属性'UserName'

Question

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

我写这篇文章的代码，但在控制台中获得此错误：

TypeError: Cannot read property 'UserName' of undefined

类AuthService

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()); 
    }** 

} 

我敢肯定的是，用户登录，因为我可以读他的令牌。

网络API方法

/// <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

you'are试图访问this.currentUser.UserName前this.authService.get()解决User价值，因为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); 
      });   

     } 
    }