[英]ionic 3, custom component and ngClass binding issue
I tried to make a simple component in Ionic3 to display dots to indicate on which page we are. 我试图在Ionic3中制作一个简单的组件来显示点以指示我们在哪一页上。 I'd used the ionic generate command to generate this component :
我曾使用ionic generate命令来生成此组件:
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;
}
}
and this is the template part : 这是模板部分:
<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>
when i remove ngclass attribute, there is no problems. 当我删除ngclass属性时,没有问题。 but, when i add it, i have the following error :
但是,当我添加它时,出现以下错误:
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)
i haven't find anything about this issue. 我没有找到任何关于这个问题的信息。 So, if you have an idea, you're welcome.
因此,如果您有个主意,欢迎您。
thanks for reading. 谢谢阅读。
You need to add BrowserModule 您需要添加BrowserModule
@NgModule(
imports: [BrowserModule, /* other imports */] from '@angular/platform-browser',
...
)
If it is in a child module import CommonModule. 如果在子模块中,请导入CommonModule。
import { CommonModule } from "@angular/common"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.