API调用上的角度定位控制台错误

Question

我有一个网站，它向控制台报告错误消息，但是它可以在屏幕上运行。我怀疑这是由于页面的呈现方式引起的，但是在搜索了错误和Angular呈现之后，我看不到如何解决此问题。

这是控制台的外观：

这是处理API调用的服务：

import { Injectable } from '@angular/core';
import { Http, Response, Headers } from "@angular/http";

@Injectable()
export class WmApiService {

  private _baseUrl = "http://localhost:58061/";
  tempuser = "WebDevelopWolf";
  modules: any;

  constructor(private _http: Http) {
    console.log('Wavemaker API Initialized...');
  }

  // On successful API call
  private extractData(res: Response) {
    let body = res.json();
    return body || {};
  }

  // On Error in API Call
  private handleError(error: any): Promise<any> {
    console.error('An error occurred', error);
    return Promise.reject(error.message || error);
  }

  // Basic Get W/ No Body
  getService(url: string): Promise<any> {
    return this._http
        .get(this._baseUrl + url)
        .toPromise()
        .then(this.extractData)
        .catch(this.handleError);
  }

  // Basic Post W/ Body
  postService(url: string, body: any): Promise<any> {
    console.log(body);
    let headers = new Headers({'Content-Type': 'application/json'});
    return this._http
      .post(this._baseUrl + url, body, {headers: headers})
      .toPromise()
      .then(this.extractData)
      .catch(this.handleError);
  }

}

最后是对该服务的调用：

ngOnInit() {
    this.getUserProfile();
  }

  // Fill the user profile information
  getUserProfile() {
    this._wmapi
    .getService("User/" + this._wmapi.tempuser)
    .then((result) => {
      // Push the user to UI
      this.userProfile = result;
      // Set the user avatar
      this.userAvatar = "../assets/users/profile/" + this.userProfile.Username + ".png"; 
    })
    .catch(error => console.log(error));
  }

过去，我有几个人告诉我，我不应该使用诺言，因为它们已经过时了，但是几年前与Ionic合作才是我所熟悉的-但是，如果有的话这是一种更好的方法，我绝对愿意提出建议，尤其是如果是引起问题的诺言。

Answer 1

尝试：

<div>{{some-value?.UserFullName}}</div>

在API响应到达之前，您的some-value对象没有该值。然后使用?进行空检查，直到响应到达。

Answer 2

问题在于angular试图渲染您的组件，而this.userProfile尚未被实例化，因此您正在尝试解析undefined的属性。

您需要处理没有userProfile的情况，因此您可以在模板的该部分使用ngIf，或使用getter获取这些道具，或直接在模板{{userProfile && userProfile.someProp}}中执行检查