Ionic 2 Angular 2 JSON - Невозможно прочитать свойство «x» неопределенного, но x.field работает

Question

в проекте Ionic2 У меня есть страница «А», которая вызывает службу, которая обеспечивает результат файла JSON. На странице «А» я могу прочитать все поля каждого элемента JSON и показать их в HTML. Затем мне нужно показать некоторые из этих полей на другой странице «B», поэтому нажмите эту страницу с одним из этого элемента (параметра). На странице «B» я не могу прочитать поля элемента direclty из HTML. Единственный способ, который работает, - читать каждое поле отдельно. Я дам вам пример:

test.json:

{ 
"elements" : [ 
    { "name":"Max", 
     "age":"23"}, 
    { "name":"John", 
     "age":"31"} 
]} 

Поставщик GET вызов:

getElements(){ 
     return this.http.get('test.json').map(res => res.json()); 
} 

страница А getjson:

public myelements: any; 
loadElements(){ 
     this.getjson.getElements().subscribe(
      result => { 
       this.myelements=result.elements; 
      } 
    ); 
    } 

на странице A это работает должным образом:

эта функция(клик) является:

goToPageB(ele) { 
     this.navCtrl.push(PageB, 
         {ele: ele} 
    ) 
    } 

в страницу 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 

наконец, в HTML страницы B, если я использую лучший способ:

<div>{{myele.name}} </div> 
<!-- error: Cannot read property 'name' of undefined --> 

, если я использую другой способ, он работает:

<div> {{myname}}</div> 

Я действительно не понимаю, почему я не могу использовать непосредственно элемент.

Answer 1

попытаться изменить его на:

<div>{{myele?.name}} </div> 

Answer 2

Может быть кто-нибудь другой находит это полезным. Хотя ответ принят. Попробуйте что-то вроде этого

import { Component } from '@angular/core'; 
import { NavController, NavParams } from 'ionic-angular'; 

    @Component({ 
     selector: 'page-b', 
     templateUrl: 'bPage.html' 
    }) 
    export class BPage{ 
    public myele:any; 
     constructor(public navCtrl: NavController, public navParams:NavParams) { 
      this.myele= navParams.get("ele"); 
     } 

     ionViewDidLoad() { 
     console.log('Hello page B'); 
     } 

    } 

В видовом сделать что-то вроде этого:

<div>{{myele.name}}</div>