Angular2奇怪的硬编码对象vs http.get对象问题
我拥有相同的JSON数据,我保存在.ts(硬编码)和.json(http get)中。两个对象在开发控制台中都是一样的。Angular2奇怪的硬编码对象vs http.get对象问题
我可以使用“{{beatlesjson | json}}”和“{{beatlesjson.paul | json}}”打印输出从外部JSON获取的数据,但我无法打印出“{{beatlesjson.paul.name | json }}“,它打破了进一步的应用程序执行。
如果在TS文件中使用相同的JSON但硬编码,则以前的paragraf按预期工作。
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)
);
}
}
您可以使用Elvis操作符的这种行为,以防止:
{{ beatlesjson?.paul?.name | json }
你的问题的原因是数据通过一个HTTP请求异步接收。所以beatlesjson
属性在开始时是未定义的。
它现在可以工作,只需要“猫王”即可完成所有的同步。再次感谢蒂埃里;) –
这是因为构造函数体在内插html之前执行。所以beatles.paul
存在。
快速修复:
相反的:<!-- BREAKS FURTHER EXEC, DOES NOT WORK {{ beatlesjson.paul.name | json }} -->
做:
{{ beatlesjson && beatlesjson.paul && beatlesjson.paul.name | json }}
为了确保您不会错误地访问一个成员了一些undefined
。
那么抛出了什么错误?你真的需要那个'name'的过滤器吗? – charlietfl
尝试elvis运算符,因为在加载数据之前paul属性可能为null,“{{beatlesjson.paul?.name | json}}' – Chandermani