Question

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

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中的

可正常工作：

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

这个（点击）功能是：

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

最后，在页面B的html中，如果我使用最佳方式：

<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>

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

2 个答案: