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

Posted 2023-03-13

【中文标题】Angular4：在视图中显示对象的子属性

【英文标题】：Angular4: Display subProperty of an object in a View

【发布时间】：2018-06-18 21:47:28

【问题描述】：

我是 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)

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

【问题讨论】：

写<li *ngFor="let horosocope of horoscopes">horoscope | json</li>看到什么？

几乎一样的东西，12个空<li>

【参考方案1】：

只是打字错误！

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

应该是

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

是时候休息一下了:-)。

【讨论】：

“G-g-g-g-g-g-g-god-like！”，你摇滚！我在几个小时内搜索了这个！没想到在这种情况下我会遇到这个错误（但更像是“星座不存在”

【参考方案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 时停止评估，这通常发生在异步获取数据时，例如从服务器获取可能需要相当长的时间。

【讨论】：

现在我没有异常，但是没有任何东西添加到我的html中，它看起来只是<ul><li></li><li></li><li></li>...</ul>（带有额外的_ng-content-c8）

看起来 sign 是一个你有“名字”的对象的属性，所以你应该正确访问它

没错，但如何“正确”访问它？

horoscope?.sign && horoscope?.sign?.name 你可以试试这个