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

【问题标题】：ion-col col-3 throws a template parse errorion-col col-3 抛出模板解析错误
【发布时间】：2018-07-10 23:20:54
【问题描述】：

我目前正在尝试从构造函数中打印数据。数据通过并且一切正常，直到我尝试将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 {}

对于我输入的每个col-3，错误都是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。知道我做错了什么吗？

【问题讨论】：

标签： javascript angularjs typescript ionic-framework

【解决方案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>

【讨论】：

好吧，我很笨。我会在 6 分钟内选择它

【解决方案2】：

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

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

【讨论】：

这是命名约定还是编程习惯？
这是一种练习。