Question

我试图在Ionic3中制作一个简单的组件来显示点，以指示我们在哪个页面上。我使用了离子生成命令来生成这个组件：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'panel-indicator',
  templateUrl: 'panel-indicator.html'
})
export class PanelIndicatorComponent {

  @Input() page: number;

  constructor() {
    console.log('Hello PanelIndicatorComponent Component');
    this.page = 1;
  }

}

这是模板部分：

<div class="indicator-list">
  <div class="indicator selected" [ngClass]="{'selected': page === 1}"></div>
  <div class="indicator" [ngClass]="{'selected': page === 2}"></div>
  <div class="indicator" [ngClass]="{'selected': page === 3}"></div>
</div>

当我删除ngclass属性时，没有问题。但是，当我添加它时，我有以下错误：

Can't bind to 'ngClass' since it isn't a known property of 'div'. ("
<div class="indicator-list">

  <div class="indicator selected" [ERROR ->][ngClass]="{'selected': page === 1}"></div>

  <div class="indicator" [ngClass]="{'selected': page =="): ng:///ComponentsModule/PanelIndicatorComponent.html@4:34
Can't bind to 'ngClass' since it isn't a known property of 'div'. ("iv class="indicator selected" [ngClass]="{'selected': page === 1}"></div>

  <div class="indicator" [ERROR ->][ngClass]="{'selected': page === 2}"></div>

  <div class="indicator" [ngClass]="{'selected': page =="): ng:///ComponentsModule/PanelIndicatorComponent.html@6:25
Can't bind to 'ngClass' since it isn't a known property of 'div'. ("
  <div class="indicator" [ngClass]="{'selected': page === 2}"></div>

  <div class="indicator" [ERROR ->][ngClass]="{'selected': page === 3}"></div>

</div>
"): ng:///ComponentsModule/PanelIndicatorComponent.html@8:25
    at syntaxError (http://localhost:8100/build/vendor.js:101030:34)
    at TemplateParser.parse (http://localhost:8100/build/vendor.js:124893:19)
    at JitCompiler._parseTemplate (http://localhost:8100/build/vendor.js:134321:37)
    at JitCompiler._compileTemplate (http://localhost:8100/build/vendor.js:134296:23)
    at http://localhost:8100/build/vendor.js:134198:62
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (http://localhost:8100/build/vendor.js:134198:19)
    at http://localhost:8100/build/vendor.js:134068:19
    at Object.then (http://localhost:8100/build/vendor.js:101019:77)
    at JitCompiler._compileModuleAndComponents (http://localhost:8100/build/vendor.js:134067:26)

我对此问题一无所知。所以，如果你有一个想法，那么欢迎你。

感谢阅读。

Answer 1

您需要添加BrowserModule

@NgModule(
  imports: [BrowserModule, /* other imports */] from '@angular/platform-browser',
  ...
)

如果是在子模块中导入CommonModule。

import { CommonModule } from "@angular/common"

离子3，自定义组件和ngClass绑定问题

1 个答案: