离子应用程序不显示任何内容

Question

我根据以下教程构建了一个简单的离子应用程序：Building a Review app with Ionic 2, MongoDB and Node by Josh Moroney。每当我执行ionic serve命令时，应用程序在浏览器中运行，没有错误，但它什么也没显示。甚至不是应用程序的UI元素，只是一个简单的空白屏幕。

以下是我的代码 - app.module.ts

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { AddReviewPage } from '../pages/add-review/add-review'
import { ReviewsProvider } from '../providers/reviews/reviews';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    AddReviewPage
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    AddReviewPage
  ],
  providers: [
    ReviewsProvider
  ]
})
export class AppModule {}

提供者 - reviews.ts

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';

/*
  Generated class for the ReviewsProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class ReviewsProvider {

  data: any;

  constructor(public http: HttpClient) {
    this.data = null;
  }

  getReviews(){

    if (this.data) {
      return Promise.resolve(this.data);
    }

    return new Promise(resolve => {

      this.http.get('http://localhost:8080/api/reviews')
        .map(res => res)
        .subscribe(data => {
          this.data = data;
          resolve(this.data);
        });
    });

  }

  createReview(review){

    let headers = new HttpHeaders();
    headers.append('Content-Type', 'application/json');

    this.http.post('http://localhost:8080/api/reviews', JSON.stringify(review), {headers: headers})
      .subscribe(res =>
        console.log(res));

  }

  deleteReview(id){

    this.http.delete('http://localhost:8080/api/reviews/' + id).subscribe((res) =>
      console.log(res));

  }

}

页面 - ＆gt;附加review.html的

<ion-header>
 <ion-toolbar transparent>
  <ion-title>Add Review</ion-title>
  <ion-buttons end>
    <button ion-button icon-only (click)="close()"><ion-icon name="close"></ion-icon></button>
  </ion-buttons>
 </ion-toolbar>
</ion-header>

<ion-content>

  <ion-list no-lines>

    <ion-item>
      <ion-label floating>Title</ion-label>
      <ion-input [(ngModel)]="title" type="text"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label floating>Review</ion-label>
      <ion-textarea [(ngModel)]="description"></ion-textarea>
    </ion-item>

    <ion-item>
      <ion-range min="0" max="100" pin="true" [(ngModel)]="rating">
        <ion-icon range-left name="sad"></ion-icon>
        <ion-icon range-right name="happy"></ion-icon>
      </ion-range>
    </ion-item>

  </ion-list>

  <button ion-button full color="secondary" (click)="save()">Save</button>

</ion-content>

附加review.ts

import { Component } from '@angular/core';
import { ViewController } from 'ionic-angular';

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

@IonicPage()
@Component({
  selector: 'page-add-review',
  templateUrl: 'add-review.html',
})
export class AddReviewPage {

  title: any;
  description: any;
  rating: any;


  constructor(public viewCtrl: ViewController) {
  }

  save(): void {

    let review = {
      title: this.title,
      description: this.description,
      rating: this.rating
    };

    this.viewCtrl.dismiss(review);

  }

  close(): void {
    this.viewCtrl.dismiss();
  }

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

}

首页 - ＆gt; home.html的

<ion-header>
 <ion-navbar transparent>
  <ion-title>
    Review King
  </ion-title>
  <ion-buttons end>
    <button ion-button icon-only (click)="addReview()"><ion-icon name="add"></ion-icon></button>
  </ion-buttons>
 </ion-navbar>
</ion-header>

<ion-content>

  <ion-list no-lines>

    <ion-item-sliding *ngFor="let review of reviews">

      <ion-item>

        <ion-avatar item-left>
          <img src="https://api.adorable.io/avatars/75/{{review.title}}">
        </ion-avatar>

        <h2>{{review.title}}</h2>
        <p>{{review.description}}</p>

        <ion-icon *ngIf="review.rating < 50" danger name="sad"></ion-icon>
        <ion-icon *ngIf="review.rating >= 50" secondary name="happy"></ion-icon>
        {{review.rating}}

      </ion-item>

      <ion-item-options>
        <button ion-button color="danger" (click)="deleteReview(review)">
          <ion-icon name="trash"></ion-icon>
          Delete
        </button>
      </ion-item-options>
    </ion-item-sliding>

  </ion-list>

</ion-content>

home.ts

import { Component } from '@angular/core';
import { NavController, ModalController } from 'ionic-angular';
import { AddReviewPage } from '../add-review/add-review';
import { ReviewsProvider } from '../../providers/reviews/reviews';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  reviews : any;

  constructor(public navCtrl: NavController, public reviewService: ReviewsProvider, public modalCtrl: ModalController) {
  }

  ionViewDidLoad(){

   this.reviewService.getReviews().then((data) => {
     console.log(data);
     this.reviews = data;
   });

 }

 addReview(){

   let modal = this.modalCtrl.create(AddReviewPage);

   modal.onDidDismiss(review => {
     if(review){
       this.reviews.push(review);
       this.reviewService.createReview(review);
     }
   });

   modal.present();

 }

 deleteReview(review){

   //Remove locally
     let index = this.reviews.indexOf(review);

     if(index > -1){
       this.reviews.splice(index, 1);
     }

   //Remove from database
   this.reviewService.deleteReview(review._id);
 }

}

我无法弄清楚我做错了什么。任何人都可以指出来吗？我的视图页面或app.module.ts中的配置是否有问题？

Answer 1

请确保在app.component.ts页面中设置了rootPage。

如果没有，请将以下内容插入课程

  

rootPage：any = HomePage;