Angular 2: {{object}} funktioniert, {{object.child}} löst Fehler aus

Question

Seit einiger Zeit arbeiten Sie mit Angular v1 und seitdem Angular v2 in die Beta kam, haben Sie damit herumgespielt.

Jetzt habe ich dieses Stück Code, aber kann es nicht zur Arbeit bringen, weiß wirklich nicht warum. Irgendwie, wenn ich {{profileUser | json}} drucke, funktioniert alles gut (profileUser ist ein Objekt).

Aber als ich ein Kind dieses Objekt drucken möchte (zB {{profileUser.name}} oder {{profileUser.name.firstName}}), Angular führt den folgenden Fehler:

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

Hier ist ein Code

Es ist mir wirklich verwirrend, sollte um nur eine der einfachsten Dinge sein .. Nur mit Typoskript gestartet - 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); 
      } 
     ) 
     ; 
    }); 
    } 
} 

Und hier ist mein 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); 
     }) 
    ; 
    } 
} 

schließlich die profile.html Vorlage:

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

oder ..

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

oder ..

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

FYI, die profileUser sieht wie folgt aus:

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

Wäre toll, wenn mir jemand helfen könnte, aus, Das hält mich wirklich davon ab, mich mit Angular v2 vertraut zu machen. Vielen Dank!

Answer 1

Tatsächlich ist Ihr profileUser Objekt von einer HTTP-Anfrage geladen und es kann null am Anfang sein. Die json Leitung macht einfach eine JSON.stringify.

Es ist, was Ihre Fehlermeldung sagte: undefined is not an object (evaluating 'l_profileUser0.name').

Sie müssen sicherstellen, dass Ihr profileUser Objekt nicht null ist, um sein name Attribut und so weiter zu erhalten. Dies kann unter Verwendung einer *ngIf Richtlinie erfolgen:

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

Wenn die Daten dort sein wird, wird der HTML-Block angezeigt werden.

Als Eric angegeben könnte der Elvis-Operator Ihnen auch helfen. Anstatt {{profileUser.name | json}} zu verwenden, können Sie {{profileUser?.name | json}} verwenden.

Hoffe, es hilft Ihnen, Thierry

Answer 2

Es geschieht, weil, wenn der Controller erstellt wird, die profileUser nicht definiert ist. Und wenn Sie {{profileUser | json}} verwenden, weiß der Filter json, dass Ihre Daten nicht definiert sind und nichts tun.Wenn die profileUser endlich definiert ist, funktioniert die eckige Updates thw ganze Sache und dann profileUser | json funktioniert. Aber wenn Sie {{ profileUser.anything | json}} verwenden, erhalten Sie einen Fehler, weil profileUser undefined startet.

Sie können es lösen, ist ein leeres Profil auf Ihre Variable am Anfang Ihrer Reglereinstellung, einfach so:

profileUser = { name: {}}; 

Auf diese Weise profileUser nie undefined