Ionic 2 Angular 2 JSON - 无法读取未定义的属性'x',但x.field可以正常工作

Joh*_*nes 2 json angular

在Ionic2项目中,我有一个页面'A',它调用提供JSON文件结果的服务.在'A'页面中,我能够读取每个JSON元素的所有字段,并在HTML中显示它们.比,我需要在另一个页面'B'中显示一些这样的字段,所以用这个元素之一(参数)推送这个页面.在页面'B'中,我无法从HTML中读取元素direclty的字段.唯一有效的方法是分别读取每个字段.我给你举个例子:

test.json:

{
"elements" : [
    {   "name":"Max",
        "age":"23"},
    {   "name":"John",
        "age":"31"}
]}
Run Code Online (Sandbox Code Playgroud)

提供者GET调用:

getElements(){
      return this.http.get('test.json').map(res => res.json());
}
Run Code Online (Sandbox Code Playgroud)

第一页getjson:

public myelements: any;
loadElements(){
      this.getjson.getElements().subscribe(
          result => {
              this.myelements=result.elements; 
          }
      );
  }
Run Code Online (Sandbox Code Playgroud)

在页面A这适当地工作:

<div class="row" *ngFor="let ele of myelements" (click)="goToPageB(ele)">
{{ele.name}} and {{ele.age}}</div>
Run Code Online (Sandbox Code Playgroud)

这个(点击)功能是:

goToPageB(ele) {
      this.navCtrl.push(PageB, 
                        {ele: ele}
      )
  }
Run Code Online (Sandbox Code Playgroud)

在页面B中,一种方式不起作用,另一种方式起作用.我不明白为什么:

public myele: any; // the best way, not work
public myname: any; // the other way, works

ionViewDidLoad() { 
    this.myele = this.navParams.get('ele'); // the best way, but error
    //this.myname = this. navParams.get('ele').name; // this worse way works
Run Code Online (Sandbox Code Playgroud)

最后,在页面B的html中,如果我使用最好的方式:

<div>{{myele.name}} </div> 
<!-- error: Cannot read property 'name' of undefined -->
Run Code Online (Sandbox Code Playgroud)

如果我使用其他方式,它的工作原理:

<div> {{myname}}</div>
Run Code Online (Sandbox Code Playgroud)

我真的不明白为什么我不能直接使用元素.

sel*_* mn 7

尝试将其更改为:

<div>{{myele?.name}} </div> 
Run Code Online (Sandbox Code Playgroud)