Ngx-bootstrap поддерживает Angular 4?Если поддерживает, почему я получаю ошибку ниже? - PullRequest
0 голосов
/ 24 сентября 2019

Я встроил 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...