angular - ngx-bootstrap 是否支持 Angular 4?如果支持,为什么我会收到以下错误?
问题描述
我在我的 Angular 4 应用程序中集成了 ngx-boostrap,如下所示。但是,我在浏览器控制台中收到错误并且它不起作用。ngx-bootstrap 是否支持 Angular 4?如果支持,为什么我会收到以下错误?如何正确地将 ngx-bootstrap 与 Angular 4 集成?
浏览器控制台错误
core.es5.js:1084 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'collapse' since it isn't a known property of 'div'. ("
</button>
<hr>
<div id="collapseBasic" [ERROR ->][collapse]="isCollapsed">
<div class="well well-lg card card-block card-header">Some content</div>
"): ng:///DashboardModule/TreeViewComponent.html@52:24
Error: Template parse errors:
Can't bind to 'collapse' since it isn't a known property of 'div'. ("
</button>
<hr>
<div id="collapseBasic" [ERROR ->][collapse]="isCollapsed">
<div class="well well-lg card card-block card-header">Some content</div>
"): ng:///DashboardModule/TreeViewComponent.html@52:24
at syntaxError (compiler.es5.js:1540)
at TemplateParser.parse (compiler.es5.js:12031)
at JitCompiler._compileTemplate (compiler.es5.js:25782)
at compiler.es5.js:25706
at Set.forEach (<anonymous>)
at JitCompiler._compileComponents (compiler.es5.js:25706)
at createResult (compiler.es5.js:25591)
at ZoneDelegate.invoke (zone.js:391)
at Object.onInvoke (core.es5.js:4149)
at ZoneDelegate.invoke (zone.js:390)
at resolvePromise (zone.js:769)
at resolvePromise (zone.js:740)
at zone.js:817
at ZoneDelegate.invokeTask (zone.js:424)
at Object.onInvokeTask (core.es5.js:4140)
at ZoneDelegate.invokeTask (zone.js:423)
at Zone.runTask (zone.js:191)
at drainMicroTaskQueue (zone.js:584)
安装 ngx-bootstrap
npm install ngx-bootstrap --save
在 angular-cli.json
"styles": [
"scss/style.scss",
"../node_modules/ng2-toastr/bundles/ng2-toastr.min.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
在 app.module.ts
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CollapseModule } from 'ngx-bootstrap/collapse';
@NgModule({
imports: [
.....
BrowserAnimationsModule,
CollapseModule.forRoot()
],
..........
在树视图.componenet.ts
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CollapseModule } from 'ngx-bootstrap/collapse';
@NgModule({
imports: [
BrowserAnimationsModule,
CollapseModule.forRoot()
]
})
@Component({
selector: 'tree-view',
templateUrl: './tree-view.component.html',
styleUrls: ['./tree-view.component.scss']
})
export class TreeViewComponent implements OnInit {
isCollapsed = false;
constructor() {
}
ngOnInit() {
}
}
在 tree-view.component.html 中
<button type="button" class="btn btn-primary" (click)="isCollapsed = !isCollapsed"
[attr.aria-expanded]="!isCollapsed" aria-controls="collapseBasic">Toggle collapse
</button>
<hr>
<div id="collapseBasic" [collapse]="isCollapsed">
<div class="well well-lg card card-block card-header">Some content</div>
</div>
解决方案
推荐阅读
- ios - 表格视图单元格中的按钮没有响应
- java - 尝试在 appium 上使用点击触摸操作但不工作
- c# - 将 ASPNET API 添加到现有的 Worker Service 项目
- reactjs - 是否可以使用 Axios 参数进行动态 GET 请求?
- python - 如何在“查找字段”中插入值
- javascript - 如何使用 eval 运行 javascript 代码
- python - 关于没有索引的切片和 for 循环的简单问题
- java - 在Java中如何在更高级别调用函数时显示函数参数?
- google-cloud-dataflow - 如何启动具有幂等性的数据流模板作业?
- python - Python QTimer 和带有 Qt 的图形用户界面 (GUI) 应用程序如何协同工作?