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

Question

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

我有一个 angular 服务，它向我的网络服务发出 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 控制台告诉我它与 "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)

我做错了什么？对不起，我觉得这是一个愚蠢的问题，但我不知道我错过了什么。

Answer 1

尝试添加问号

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

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

当 Angular 在 horoscope 得到赋值之前呈现视图时，会导致异常。？。当 horoscope 为空或未定义时停止评估，这通常发生在异步获取数据时，例如从服务器获取数据可能需要相当长的时间。

Answer 2

只是一个输入错误的问题！

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

应该是

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

该休息了:-)。

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

Angular4: Display subProperty of an object in a View

typescript

angular-template

angular-components

angular