Question

我目前正在尝试从构造函数中打印数据。在我尝试将col-3添加到ion-col之前，数据会完整无缺。我猜我错过了一些模块，但不知道哪一个。

我的home.ts文件

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

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  dni: any;
  constructor(public navCtrl: NavController) {
    this.dni = {
      Wtorek: {
        do: {
          linia: ['3B', '2A'],
          godzina: '17.12'
        },
        z: {
          linia: ['2A', '7A'],
          godzina: '19.32'
        },
        zajecia: 'BJJ GI'
      },
      Sroda: [{
        do: {
          linia: ['3B', '2A'],
          godzina: '11.12'
        },
        z: {
          linia: ['2A', '7A'],
          godzina: '13.32'
        },
        zajecia: 'Thai Kickboxing'
      },
      {
        do: {
          linia: ['3B', '2A'],
          godzina: '17.12'
        },
        z: {
          linia: ['2A', '7A'],
          godzina: '19.32'
        },
        zajecia: 'Boxing'
      }],
      Piatek: {
        do: {
          linia: ['3B', '2A'],
          godzina: '18.12'
        },
        z: {
          linia: ['2A', '3B'],
          godzina: '20.32'
        },
        zajecia: 'NoGi'
      },
      Sobota: {
        do: {
          linia: ['3B', '2A'],
          godzina: '11.12'
        },
        z: {
          linia: ['2A', '7A'],
          godzina: '13.32'
        },
        zajecia: 'Sparring'
      }
    }
  }

}


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

<ion-content padding>
  <ion-grid *ngIf="dni">
    <ion-row>
      <ion-col col-3>
        Wtorek:
      </ion-col col-3>
      <ion-col col-3>
        Do:
      </ion-col col-3>
      <ion-col col-3>
        {{dni.Wtorek.do.godzina}} {{dni.Wtorek.do.linia[0],dni.Wtorek.do.linia[1]}}
      </ion-col>
      <ion-col col-3>

      </ion-col>
      <ion-col col-3>

      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

我的app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    TabsPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    TabsPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

我投入的每个Error: Template parse errors: Unexpected character "c" (" <ion-col col-3> Wtorek: </ion-col [ERROR ->]col-3> <ion-col col-3> Do: "): ng:///AppModule/HomePage.html@11:20错误都是col-3。我知道我做错了吗？

Answer 1

从结束ion-col

中删除col-3

<ion-content padding>
  <ion-grid *ngIf="dni">
   <ion-row>
    <ion-col col-3>
      Wtorek:
    </ion-col>
    <ion-col col-3>
      Do:
    </ion-col>
    <ion-col col-3>
      {{dni.Wtorek.do.godzina}} {{dni.Wtorek.do.linia[0],dni.Wtorek.do.linia[1]}}
    </ion-col>
    <ion-col col-3>

    </ion-col>
    <ion-col col-3>

    </ion-col>
   </ion-row>
  </ion-grid>
</ion-content>

Answer 2

除了@ChesterLaborde的回答，请始终为您的selector和templateUrl提供相同的名称。因此，如果您的home组件有home.html和home.ts，那么您的代码应该是这样的

@Component({
  selector: 'home',
  templateUrl: 'home.html'
})

ion-col col-3抛出模板解析错误

2 个答案: