Question

我正在通过提供程序从api读取json数据，然后成功列出数据。

以下代码来自我的 paper.html 我如何列出并为每个项目调用点击功能：

<ion-item *ngFor="let paper of papers" (click)='loadPaper(paper)'>
    {{paper.paper.title}}
</ion-item>

下面的 loadPaper（）功能在 paper.ts 中实现：

loadPaper(paper){
    console.log('A paper', paper);
    this.navCtrl.push(this.loadPaperPage, {paper:paper});
  }

此时， console.log 成功显示了json中一个条目的数据内容。我还将纸质数据推送到另一个页面 loadPaperPage 。

我的问题出在 load-paper.html ：当我尝试从传递的 paper 对象打印数据时，出现以下错误：

错误：未捕获（在承诺中）：TypeError：无法读取属性＆＃39; paper＆＃39; 未定义的TypeError：无法读取属性＆＃39; paper＆＃39;未定义的 at Object.eval [as updateRenderer]（ng：///AppModule/LoadPaperPage.ngfactory.js:32:31） at Object.debugUpdateRenderer [as updateRenderer]（http://localhost:8100/build/vendor.js:15067:21）在checkAndUpdateView（http://localhost:8100/build/vendor.js:14181:14）在callViewAction（http://localhost:8100/build/vendor.js:14527:21）在execComponentViewsAction（http://localhost:8100/build/vendor.js:14459:13）在checkAndUpdateView（http://localhost:8100/build/vendor.js:14182:5） at callWithDebugContext（http://localhost:8100/build/vendor.js:15430:42） at Object.debugCheckAndUpdateView [as checkAndUpdateView]（http://localhost:8100/build/vendor.js:14967:12）在ViewRef_.detectChanges（http://localhost:8100/build/vendor.js:11951:22） at NavControllerBase._viewAttachToDOM（http://localhost:8100/build/vendor.js:52404:40）在c（http://localhost:8100/build/polyfills.js:3:19752）在Object.reject（http://localhost:8100/build/polyfills.js:3:19174） at NavControllerBase._fireError（http://localhost:8100/build/vendor.js:52167:16） at NavControllerBase._failed（http://localhost:8100/build/vendor.js:52160:14）在http://localhost:8100/build/vendor.js:52207:59 at t.invoke（http://localhost:8100/build/polyfills.js:3:14976） at Object.onInvoke（http://localhost:8100/build/vendor.js:5123:33） at t.invoke（http://localhost:8100/build/polyfills.js:3:14916）在r.run（http://localhost:8100/build/polyfills.js:3:10143）在http://localhost:8100/build/polyfills.js:3:20242

我的纸质对象似乎不存在，我不确定为什么。

load-paper.html 如下：

<ion-header>

  <ion-navbar>
    <ion-title>loadPaper</ion-title>
    TEST: {{paper.paper.title}}
  </ion-navbar>

</ion-header>


<ion-content padding>
</ion-content>

并且，load-paper.ts：

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

/**
 * Generated class for the LoadPaperPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-load-paper',
  templateUrl: 'load-paper.html',
})
export class LoadPaperPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad LoadPaperPage');
  }

}

Answer 1

问题是发送参数是不够的，您还需要在要使用它的页面中获取它。所以这应该有效：

@IonicPage()
@Component({
  selector: 'page-load-paper',
  templateUrl: 'load-paper.html',
})
export class LoadPaperPage {

  public paperParam: any; // Property to get the param

  constructor(public navCtrl: NavController, public navParams: NavParams) {}

  ionViewDidLoad() {
    console.log('ionViewDidLoad LoadPaperPage');

    // Get the parameter sent and put it in the paperParam
    // property from this component so you can use it in the view
    this.paperParam = this.navParams.get('paper');
  }

}

然后在视图中，使用新的paperParam属性：

<ion-header>    
  <ion-navbar>
    <ion-title>loadPaper</ion-title>        
  </ion-navbar>    
</ion-header>


<ion-content padding>

  <!-- Now you can use the paperParam property from the component -->
  TEST: {{ paperParam.paper.title }}

</ion-content>

离子页面没有将数据从成绩单传递到HTML

1 个答案: