Angular4：在视图中显示对象的子属性

Question

我是 angular4 的新手，我在显示一些信息时遇到了一些问题。

我有一个角度服务，它向我的网络服务发出 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 个要点，但没有别的，Chrome 控制台告诉我它与“签名”无关：

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>

当 Angular 在 horoscope 获得赋值之前渲染视图时，它会导致异常。 ?.当 horoscope 为 null 或 undefined 时停止评估，这通常发生在异步获取数据时，例如从服务器获取可能需要相当长的时间。