Angular 2：{{object}} 有效，{{object.child}} 抛出错误

Question

使用 Angular v1 已经有一段时间了，自从 Angular v2 进入 Beta 以来，就一直在研究它。

现在我得到了这段代码，但是无法让它工作，真的不知道为什么。不知何故，当我打印 {{profileUser | json}} 时一切正常（profileUser 是一个对象）。

但是当我想打印该对象的子对象时（例如 {{profileUser.name}} 或 {{profileUser.name.firstName}}），Angular 会抛出以下错误：

EXEPTION: TypeError: undefined is not an object (evaluating 'l_profileUser0.name') in [ {{profileUser.name}} in ProfileComponent@4:11.

我真的很困惑，应该只是周围最简单的事情之一..刚开始使用 TypeScript 顺便说一句..

这是一些代码 - ProfileService.ts:

import { Injectable } from 'angular2/core';
import { Headers } from 'angular2/http';
import { API_PREFIX } from '../constants/constants';
import { AuthHttp } from 'angular2-jwt/angular2-jwt';
import 'rxjs/add/operator/map';

@Injectable()
export class ProfileService {

  API_PREFIX = API_PREFIX;

  constructor(private _authHttp:AuthHttp) {
  }

  getProfileData(username:string):any {
    return new Promise((resolve, reject) => {
      this._authHttp.get(API_PREFIX + '/users/username/' + username)
        .map(res => res.json())
        .subscribe(
          data => {
            resolve(data.data);
          },
          err => {
            reject(err);
          }
        )
      ;
    });
  }
}

这是我的 ProfileComponent:

import {Component, OnInit} from 'angular2/core';
import {RouteParams} from 'angular2/router';
import {ProfileService} from '../../services/profile.service';

@Component({
  selector: 'profile',
  templateUrl: './components/profile/profile.html',
  directives: [],
  providers: [ProfileService]
})

export class ProfileComponent implements OnInit {

  public username:string;
  public profileUser:any;

  constructor(private _profileService: ProfileService,
              private _params: RouteParams) {
    this.username = this._params.get('username');
  }

  ngOnInit() {
    this.getProfileData(this.username);
  }

  getProfileData(username:string):void {
    this._profileService.getProfileData(username)
      .then(data => {
        this.profileUser = data;
        console.log(data);
      })
    ;
  }
}

最后，profile.html 模板：

<pre> <!-- works! -->
{{profileUser | json}}
</pre>

或..

<pre> <!-- throws the error -->
{{profileUser.name | json}}
</pre>

或..

<pre> <!-- throws the error -->
{{profileUser.name.firstName}}
</pre>

仅供参考，个人资料用户如下所示：

{
  "id": "9830ecfa-34ef-4aa4-86d5-cabbb7f007b3",
  "name": {
    "firstName": "John",
    "lastName": "Doe",
    "fullName": "John Doe"
  }
}

如果有人能帮助我，那就太好了，这真的阻碍了我熟悉 Angular v2。谢谢！

Answer 1

事实上，您的 profileUser 对象是从 HTTP 请求加载的，它可以是 null 开头的。 json 管道只是执行 JSON.stringify.

这是您的错误消息所说的：undefined is not an object (evaluating 'l_profileUser0.name')。

您需要确保您的 profileUser 对象不为空才能获得其 name 属性等。这可以使用 *ngIf 指令来完成：

<div *ngIf="profileUser">
  {{profileUser.name | json}}
</div>

当数据在那里时，将显示 HTML 块。

正如 Eric 所述，Elvis 运算符也可以帮助您。您可以使用 {{profileUser?.name | json}}.

而不是 {{profileUser.name | json}}

希望对你有帮助，蒂埃里

Answer 2

发生这种情况是因为在创建控制器时，profileUser 是未定义的。而且，当您使用 {{profileUser | json}} 时，过滤器 json 知道您的数据未定义并且什么都不做。当 profileUser 最终定义时，angular 更新整个事情然后 profileUser | json 工作。但是，当您使用 {{ profileUser.anything | json}} 时，您会得到一个错误，因为 profileUser 启动 undefined。

你可以解决这个问题，在你的控制器开始时为你的变量设置一个空的配置文件，就像这样：

profileUser = { name: {}};

这样，profileUser永远不会undefined

Angular 2：{{object}} 有效，{{object.child}} 抛出错误

Angular 2: {{object}} works, {{object.child}} throws error

javascript

angular

angular2-services