Ионная страница не передает данные из транскрипта в HTML

Question

Я читаю данные JSON из API через провайдера, а затем успешно перечисляет данные.

Код ниже взят из моего 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: когда я пытаюсь распечатать данные из переданного бумажного объекта, я получаю следующую ошибку:

Ошибка: Uncaught (в обещании): TypeError: Невозможно прочитать свойство 'paper' с неопределенным TypeError: Невозможно прочитать свойство 'paper' с неопределенным в Object.eval [as updateRenderer] (ng:///AppModule/LoadPaperPage.ngfactory.js:32:31) в Object.debugUpdateRenderer [как 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) в callWithDebugContext ( http://localhost:8100/build/vendor.js:15430:42) в Object.debugCheckAndUpdateView [as checkAndUpdateView] ( http://localhost:8100/build/vendor.js:14967:12) в ViewRef_.detectChanges ( http://localhost:8100/build/vendor.js:11951:22) в NavControllerBase._viewAttachToDOM ( http://localhost:8100/build/vendor.js:52404:40) на c ( http://localhost:8100/build/polyfills.js:3:19752 http://localhost:8100/build/polyfills.js:3:19752) в Object.reject ( http://localhost:8100/build/polyfills.js:3:19174) в NavControllerBase._fireError ( http://localhost:8100/build/vendor.js:52167:16) в NavControllerBase._failed ( http://localhost:8100/build/vendor.js:52160:14) в http://localhost:8100/build/vendor.js:52207:59 в t.invoke ( http://localhost:8100/build/polyfills.js:3:14976) в Object.onInvoke ( http://localhost:8100/build/vendor.js:5123:33) в 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>