Я встроил ngx-boostrap в свое приложение Angular 4, как показано ниже.Тем не менее, я получаю сообщение об ошибке в консоли браузера, и оно не работает.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
In angular-cli.json
"styles": [
"scss/style.scss",
"../node_modules/ng2-toastr/bundles/ng2-toastr.min.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
In app.module.ts
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CollapseModule } from 'ngx-bootstrap/collapse';
@NgModule({
imports: [
.....
BrowserAnimationsModule,
CollapseModule.forRoot()
],
..........
В tree-view.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>