Javascript 角度2:{{object}}工作，{{object.child}抛出错误

一直在使用Angular v1已经有一段时间了，自从Angular v2进入测试版以来，我们一直在使用它

现在我有了这段代码，但无法让它工作，真的不知道为什么。不知何故，当我打印

{{profileUser | json}}

时，一切正常（profileUser是一个对象）

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

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

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

但是当我想打印该对象的子对象时（例如

{{profileUser.name}

或

{{profileUser.name.firstName}}

），Angular会抛出以下错误：

EXEPTION:TypeError:undefined不是中[{profileUser.name}}中的对象（计算'l_profileUser0.name'）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);
          }
        )
      ;
    });
  }
}

这是我的

档案组件

：

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

模板：

---

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

事实上，您的

profileUser

对象是从HTTP请求加载的，它可以在开始时为

null

。

json

管道只是执行

json.stringify

这是您的错误消息所说的：

undefined不是一个对象（评估'l_profileUser0.name'）

您需要确保您的

profileUser

对象不为空，以便能够获取其

名称

属性等。这可以使用

*ngIf

指令完成：

{{profileUser.name | json}

当数据出现时，将显示HTML块

如前所述，Elvis操作符也可以帮助您。您可以使用

{{profileUser.name | json}}

而不是

{{profileUser？.name | json}

希望它能帮助你，

---

Thierry

之所以发生这种情况，是因为在创建控制器时，

profileUser

是未定义的过滤器

json

知道您的数据未定义，什么也不做。当

profileUser

最终定义时，角度会随之更新，然后

profileUser | json

工作。但是，当您使用

{profileUser.anything | json}

您将收到一个错误，因为profileUser启动了未定义的

您可以通过在控制器的开头为变量设置一个空配置文件来解决此问题，如下所示：

---

这样，

profileUser

永远不会是

未定义的

你为什么要用承诺来包装它呢？一开始我没有，我猜你什么都试过；-）@foxx在angular.io文档中，他们使用承诺：同意@foox，这里不需要承诺，因为

http.get

返回一个可观察的对象（类似于承诺但更强大的东西）。这可以帮助你。非常感谢！刚刚做到了。但这在v2中是新的吗？我们应该一直这样做吗？事实上，Angular1，这是隐式完成的。你没有错误，也没有显示任何内容。关于这一点的讨论可能会让你感兴趣；-）

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

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

profileUser = { name: {}};