【问题标题】：Angular2 strange hardcoded Object vs http.get Object issueAngular2奇怪的硬编码对象与http.get对象问题
【发布时间】：2016-03-03 00:09:36
【问题描述】：

我有相同的 JSON 数据，我保存在 .ts（硬编码）和 .json（http get）中。这两个对象在开发控制台中看起来相同。

我可以使用 "{{beatlesjson | json}}" 和 "{{beatlesjson.paul | json}}" 打印从外部 JSON 检索到的数据，但我不能打印输出 "{{beatlesjson.paul.name | json} }”，它会破坏进一步的应用程序执行。

使用相同的 JSON 但在 TS 文件中硬编码时，之前的段落按预期工作。

PS。我注意到如果我不启动，我什至无法打印对象和第一个子级别：beatlesjson: Object = {};最初。但它仅适用于顶层和第一层，但会在对象的第二个子层中断。

import {Component,ElementRef,AfterViewChecked,enableProdMode} from 'angular2/core'; enableProdMode();
import {Http, Response, RequestOptions, Headers, HTTP_PROVIDERS, HTTP_BINDINGS} from 'angular2/http';

@Component({
    selector: 'my-app',
    template: `

        <pre>

        WORKS {{ beatles | json }}
        WORKS {{ beatlesjson | json }}
        <hr>

        WORKS {{ beatles.paul | json }}
        WORKS {{ beatlesjson.paul | json }}
        <hr>

        WORKS {{ beatles.paul.name | json }}
        <!-- BREAKS FURTHER EXEC, DOES NOT WORK {{ beatlesjson.paul.name | json  }} -->
        <hr>

        </pre>

    `
})

export class AppComponent {

    beatles: Object = {};
    beatlesjson: Object = {};

    constructor(http: Http){

        this.beatles = {
            john: {
                name: 'John Lennon',
                description: 'Imagining all the people',
                deceased: true
                },
            paul: {
                name: 'Paul McCartney',
                description: 'Believes in Yesterday',
                deceased: false
                },
            george: {
                name: 'George Harrison',
                description: 'His guitar gently weeps',
                deceased: true
                },
            ringo: {
                name: 'Ringo Starr',
                description: 'Going to put him in the movies',
                deceased: false
            }
        }

          http.get('app/beatles.json')
            .subscribe(
                data => { this.beatlesjson = data.json()  },
                err => console.log(err),
                () => console.log(this.beatlesjson)
            );




    }




}

【问题讨论】：

那么会抛出什么错误呢？你真的需要name 的过滤器吗？
在加载数据之前尝试 elvis 运算符，因为 paul 属性可能为 null，{{beatlesjson.paul?.name | json}}

标签： javascript json typescript angular

【解决方案1】：

您可以使用 Elvis 运算符来防止这种行为：

{{ beatlesjson?.paul?.name | json  }

您的问题的原因是数据是通过 HTTP 请求异步接收的。所以beatlesjson属性一开始是未定义的。

【讨论】：

它现在可以工作了，只需要“猫王”来使所有同步。再次感谢蒂埃里 ;)

【解决方案2】：

这是因为构造函数主体在插入 html 之前执行。所以beatles.paul 存在。

快速修复：

代替： 做：

{{ beatlesjson && beatlesjson.paul && beatlesjson.paul.name | json  }}

为了确保您不会错误地访问某些undefined 的成员。

【讨论】：