Externe Dateneinspeisung in Master/Detail-Setup in Ionic 2

Question

versuchen, sich mit Ionic2 vertraut zu machen. Kann jemand sehen, was ich fehlen könnte, um die Hauptliste der Produkte zu erhalten, die laden? Ich denke, vielleicht brauchen Sie hier auch eine Art von Datenabfrage. Ich gehe davon aus, dass meine Detailseite in Ordnung sein sollte und keine zusätzlichen Importe benötigt, sondern nur die NavParams-Anfrage. Hier

ist die Github Repo Ich habe Setup https://github.com/jones98/Ion2Blank

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

import { DetailPage } from '../pages/detail/detail'; 
import { Sheetsu } from '../../providers/sheetsu'; 

/* 
    Generated class for the Master page. 

    See http://ionicframework.com/docs/v2/components/#navigation for more info on 
    Ionic pages and navigation. 
*/ 
@Component({ 
    selector: 'page-master', 
    templateUrl: 'master.html', 
    providers: [Sheetsu] 
}) 
export class MasterPage { 

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

    ionViewDidLoad() { 
    this.sheetsuService.getRemoteData(); 
    console.log('ionViewDidLoad MasterPage'); 
    } 

    itemTapped(event, data) { 
    this.navCtrl.push(DetailPage, { 
     data: data 
    }); 
    } 

} 

Answer 1

Ok paar Dinge, vor allem der Import falsch ist, wenn Sie eine Paketstruktur wie die folgende

haben

| 
-pages 
| 
--master 
|  | 
|  -- master.ts 
| 
-- detail 
|  | 
|  -- detail.ts 
..... 

Und von master.ts Sie rufen import { Detail } from '../pages/detail/detail', die .. springt 1 Verzeichnis zurück (aktuell: Master), Springen zu ./pages. Jetzt suchen Sie nach einem Verzeichnis mit dem Namen pages in einem Verzeichnis mit dem Namen pages und suchen nach pages/pages/detail/detail, das nicht existiert. Ändern Sie Ihren Import nach ../../pages/detail/detail oder ../detail/detail würde funktionieren.

Sekunde Ihre getRemoteData() gibt nichts zurück. Ändern Sie die Methode, um einen passenden unten

getRemoteData(): any{ 
     return this.http.get('https://sheetsu.com/apis/v1.0/d0b1d8ecfc4f') 
       .map(res => res.json()); 
} 

Dann in Ihrem master.ts können Sie die Daten abrufen wirklich von dieser api zurück durch den Aufruf:

export class MasterPage { 

    // declare publicly accessible variable 
    public sheetsuData: any; 

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

    ionViewDidLoad() { 
    this.sheetsuService.getRemoteData() 
    .subscribe(response => { 
     // assign variable (async) 
     this.sheetsuData = response; 
    }); 
    } 

    itemTapped(event, data) { 
    this.navCtrl.push(DetailPage, { 
     data: data 
    }); 
    } 

} 

Und dann eine HTML-Datei, die so etwas wie dies enthält

<div *ngFor="let sheetsu of sheetsuData" (click)="itemTapped($event, sheetsu)"> 
    {{sheetsu}} 
</div>