错误:模板解析错误:在Ionic 3中

时间:2018-08-06 14:41:49

标签: ionic-framework ionic2 ionic3 ionic-view

当我运行ionic serve时,出现以下错误。为什么我得到错误?与IonicModule.forRoot(MyApp)有关系吗?

enter image description here

这是我的.html组件:

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-list inset>
    <ion-item *ngFor="let bill of bills">
      <h2>{{bill.bill_no}}</h2>
    </ion-item>
  </ion-list>
</ion-content>

bills.ts

import { Component } from '@angular/core';
import { IonicPage, IonicModule , NavController, NavParams } from 'ionic-angular';
import { Observable } from 'rxjs/Observable';
import { HttpClient } from '@angular/common/http';

import { Api } from '../../providers/api/api';
import { BillServiceProvider } from '../../providers/bill-service/bill-service';
/**
 * Generated class for the BillsPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */
@IonicPage()
@Component({
  selector: 'page-bills',
  templateUrl: 'bills.html',
})
export class BillsPage {
  bills: any;
  // constructor(public navCtrl: NavController, public navParams: NavParams) {
  // }
  constructor(public navCtrl: NavController,  public BillServiceProvider: BillServiceProvider ) {

    this.getBills();


    // .subscribe(data => {
    //   console.log('my data: ', data);
    // },
  // ionViewDidLoad() {
    //   console.log('ionViewDidLoad BillsPage');

  }

  getBills() {

    this.BillServiceProvider.getBills()

    .then(data => {

      this.bills = data;

      console.log(this.bills);

    });

  }
  // openDetails(bill){
  //     this.navCtrl.push('BillDetailsPage', {bill: bill});

  // }

}

app.module.ts

import { BillsPage } from './../pages/bills/bills';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { ErrorHandler, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Camera } from '@ionic-native/camera';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { IonicStorageModule, Storage } from '@ionic/storage';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { Items } from '../mocks/providers/items';
import { Settings, User, Api } from '../providers';
import { MyApp } from './app.component';
import { PaymentServiceProvider } from '../providers/payment-service/payment-service';
import { BillServiceProvider } from '../providers/bill-service/bill-service';

// The translate loader needs to know where to load i18n files
// in Ionic's static asset pipeline.
export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

export function provideSettings(storage: Storage) {
  /**
   * The Settings provider takes a set of default settings for your app.
   *
   * You can add new settings options at any time. Once the settings are saved,
   * these values will not overwrite the saved values (this can be done manually if desired).
   */
  return new Settings(storage, {
    option1: true,
    option2: 'Ionitron J. Framework',
    option3: '3',
    option4: 'Hello'
  });
}

@NgModule({
  declarations: [
    MyApp,
    BillsPage
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
      }
    }),
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot()
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    BillsPage
  ],
  providers: [
    Api,
    Items,
    User,
    Camera,
    SplashScreen,
    StatusBar,
    { provide: Settings, useFactory: provideSettings, deps: [Storage] },
    // Keep this to enable Ionic's runtime error handling during development
    { provide: ErrorHandler, useClass: IonicErrorHandler },
    PaymentServiceProvider,
    BillServiceProvider
  ]
})
export class AppModule { }

0 个答案:

没有答案