[英]Angular2 strange hardcoded Object vs http.get Object issue
我有相同的JSON数据,分别保存在.ts(硬编码)和.json(http get)中。 这两个对象在开发控制台中看起来相同。
我可以使用“ {{beatlesjson | json}}”和“ {{beatlesjson.paul | json}}”来打印从外部JSON检索到的数据,但无法打印出“ {{beatlesjson.paul.name | json}}”,它会中断进一步的应用执行。
使用相同的JSON但在TS文件中进行硬编码时,先前的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 }} -->
<!-- BREAKS FURTHER EXEC, DOES NOT WORK {{ beatlesjson.paul.name | json }} -->
做:
{{ beatlesjson && beatlesjson.paul && beatlesjson.paul.name | json }}
为了确保您不会访问一些undefined
的成员。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.