Ошибка привязки данных Angular 4 и MVC

Question

У меня проблема с Angular 4 и привязкой данных.У меня есть 2 класса, один раз для модели и один для сервиса.

Модель:

export class User{
    public id:number;
    public name:string;
    public surname:string;
    public email:string;
    public password?:string;

    constructor(id?:number, name?:string, surname?:string, email?:string, password?:string){
        this.id = id;
        this.name = name;
        this.surname = surname;
        this.email = email;
        this.password = password;
    }
}

Сервис:

import { Injectable } from "@angular/core";
import { User } from "../model/user";
import { PhpService } from "../cms-pages/php.service";

@Injectable()
export class UserService {

    constructor(private _http: PhpService){}

    getCurrentUser():User{
        let user:User = new User();
        this._http.get("user/self").subscribe(res =>{
            let data = res['data'];
            console.log(data['name']);
            user = new User(
                data['id'], 
                data['name'],
                data['surname'], 
                data['email']
            );
            console.log(user);
        });
        return user;
    }
}

В файле компонента I've:

public currentUser:User = new User();       
ngOnInit() {
    this.currentUser = this._user.getCurrentUser();
}

И в файле HTML я:

 <span class="nav-text" style="padding-right: 12px !important; padding-left: 5px !important; font-size: 16px;">
     {{currentUser['name']}}<br>{{currentUser['surname']}}
 </span>

Когда я захожу на страницу в консоли, она выглядит так:

Не удается прочитать свойство "имя" из неопределенного

Может кто-нибудь мне помочь?

РЕДАКТИРОВАТЬ: метод для отправки запроса:

post(url, headers, parameters): Observable<any>
{
      return this.http.post(url, '', {headers: headers, body: parameters})
          .map(message => this.interceptMex(message))
          .catch( error =>  Observable.of( this.interceptMex(error)))
          .finally(() => this.stopLoader());
}

Answer 1

Используйте RxJS Observable в сочетании с функцией map:

getCurrentUser(): Observable<User> {
  return this._http.get('user/self').map(res => {
    const data = res['data'];
    return new User(data['id'], data['name'], data['surname'], data['email']);
  });
}

ngOnInit() {
  this._user.getCurrentUser().subscribe(user => this.currentUser = user);
}

Обработка ошибок (если есть) должна передаваться в качестве второго аргумента функции subscribe.

В вашем представлении связывайте с помощью оператора безопасной навигации следующим образом:

<span>
    {{currentUser?.name}}<br>{{currentUser?.surname}}
</span>

Или альтернативно оборачивайте узлы, которые отображают данные currentUser, с помощью *ngIf:

<span *ngIf="currentUser">
    {{currentUser.name}}<br>{{currentUser.surname}}
</span>

Answer 2

Ваш вызов API является асинхронным, поэтому к моменту получения ответа пользовательский объект возвращается.Вместо этого используйте обещание.

getCurrentUser(): any {
    let user:User = new User();
    return new Promise((resolve, reject) => {
        this._http.get("user/self").subscribe(res =>{
        let data = res['data'];
        console.log(data['name']);
        user = new User(
            data['id'], 
            data['name'],
            data['surname'], 
            data['email']
        );
        resolve(user);
    }, err => {
       reject(err);
    });
    })
}

И в вашем компоненте

ngOnInit() {
  this._user.getCurrentUser().then((user) => { 
    this.currentUser = user;
  }).catch((err) => {
    console.log(err)
  });
}