Angular4：显示视图中对象的subProperty

Question

我在angular4中很新，我有一些问题要显示一些信息。

我有一个角度服务，它向我的webservice发出HTTP请求：

@Injectable()
export class AstroService {

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

在我的组件中，我查询服务：

export class DisplayComponent {
    horoscopes: any = null;

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

console.log显示预期的数据：

但是在我的组件视图中，当我尝试显示它时：

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

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

我得到了12个子弹点，但没有其他任何东西和镀铬控制台告诉我它没有关于“签名”的任何内容：

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)

我做错了什么？对不起，我觉得这是一个愚蠢的问题，但我无法弄清楚我错过了什么。

Answer 1

只是一个错误的问题！

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

应该是

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

是时候休息一下了： - ）。

Answer 2

尝试添加问号

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

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

当Horular在占星术之前渲染视图时，会导致异常。 ？。当占星为空或未定义时停止评估，这通常发生在数据被异步提取时，例如从服务器获取可能需要一段时间。