角2：{{オブジェクト}}が動作し、{オブジェクト.child}}がエラーをスローする

Question

現在Angular v1で作業していましたが、Angular v2がベータ版で提供されています。

今、私はこのコードを手に入れましたが、それを動作させることはできません。本当に理由はわかりません。どういうわけか、私が{{profileUser | json}}を印刷すると、すべて正常に動作します（profileUserはオブジェクトです）。

しかし、私は（例{{profileUser.name}}または{{profileUser.name.firstName}}のため）そのオブジェクトの子を印刷したいとき、角度は、次のエラーがスローされます。

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

それは私には本当に混乱だ、ただ一つの周りに単純なことをする必要があります。..ちょうどところで活字体で開始...ここ

は、いくつかのコードです - 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> 

か... FYI

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

、profileUserは次のようになります。誰かが私を助けることができれば

{ 
    "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')というメッセージが記載されています。

name属性などを取得するには、profileUserオブジェクトがnullでないことを確認する必要があります。これは*ngIfディレクティブを使用して行うことができます。

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

データがあるでしょう場合は、HTMLのブロックが表示されます。

Ericとして、Elvisオペレーターがお手伝いします。 {{profileUser.name | json}}の代わりに{{profileUser?.name | json}}を使用できます。

は、あなたのコントローラが作成されたとき、profileUserが定義されていないので、それが起こるティエリ

Answer 2

、それはあなたのお役に立てば幸いです。 {{profileUser | json}}を使用すると、フィルタjsonはデータが定義されておらず、何もしないことがわかります。profileUserが最終的に定義されると、角の更新はすべてのものになり、次にprofileUser | jsonが機能します。しかし、{{ profileUser.anything | json}}を使用すると、profileUserがundefinedを開始するため、エラーが発生します。

あなたはちょうどそのように、あなたのコントローラの初めにあなたの変数に空のプロファイルを設定し、それを解決することができます。

profileUser = { name: {}}; 

この方法では、profileUserができなくなります決してundefined