angular - Angular4: Visa subProperty av ett objekt i en vy

Jag är ganska ny på Angular4, och jag har några problem med att visa viss information.

Jag har en Angular-tjänst som gör en HTTP-förfrågan till min webbservice:

@Injectable()
export class AstroService {

    constructor(private _http: Http) {}
    get() {
        return this._http.get('api/astro/get')
            .map((res: Response) => {
                return  res.json();
            });
    } 
}

I min komponent frågar jag tjänsten:

export class DisplayComponent {
    horoscopes: any = null;

    constructor(private astroService:AstroService) {
        this.astroService.get()
            .subscribe(data => {
                console.log(data);
                this.horoscopes = data;
            });
    }
}

Console.log visar de förväntade uppgifterna:

Men i min komponents vy, när jag försöker visa det:

<div style="border: 1px solid red">display Component</div>

<ul>
    <li *ngFor="let horosocope of horoscopes">
        {{horoscope.sign.name}}
    </li>
</ul>

Jag fick mina 12 punkter, men inget annat och chrome-konsolen säger till mig att den inte vet något om "sign":

VM4824 DisplayComponent.ngfactory.js:8 ERROR TypeError: Cannot read property 'sign' of undefined
    at Object.eval [as updateRenderer] (VM4824 DisplayComponent.ngfactory.js:11)
    at Object.debugUpdateRenderer [as updateRenderer] (core.js:14727)
    at checkAndUpdateView (core.js:13841)
    at callViewAction (core.js:14187)
    at execEmbeddedViewsAction (core.js:14145)
    at checkAndUpdateView (core.js:13837)
    at callViewAction (core.js:14187)
    at execComponentViewsAction (core.js:14119)
    at checkAndUpdateView (core.js:13842)
    at callViewAction (core.js:14187)

Vad gjorde jag fel? Förlåt, jag känner att det är en dum fråga, men jag kan inte lista ut vad jag missade.

Svar #1

Bara ett skrivfel!

<li *ngFor="let horosocope of horoscopes">
    {{horoscope.sign.name}}
</li>

borde vara

<li *ngFor="let horosocope of horoscopes">
    {{horosocope.sign.name}}
</li>

Det är dags att ta en paus :-).

Svar #2

försök lägga till frågetecken

  <div style="border: 1px solid red">display Component</div>

 <ul>
     <li *ngFor="let horoscope of horoscopes">
       {{horoscope?.sign?.name}}
   </li>
</ul>

När Angular renderar vyn innan horoskopet har fått ett värde tilldelat, orsakar det ett undantag. ?. slutar utvärdera när horoskopet är null eller undefined, vilket vanligtvis händer när data hämtas asynkront, till exempel från servern vilket kan ta ganska lång tid.