使用[isAnimated]时会产生错误

时间:2019-06-24 10:20:14

标签: angular ngx-bootstrap

按照此documentation for ngx-bootstrap

我正在尝试根据文档设置折叠动画,它们使用Get-AdGroup 'otherdomain\groupinotherdomain'属性:

[isAnimated]

但是我收到此错误

<div id="collapseBasic" [collapse]="isCollapsed" [isAnimated]="true">
  <div class="well well-lg card card-block card-header">Some content</div>
</div>

我的.ts文件看起来像

Uncaught Error: Template parse errors:
Can't bind to 'isAnimated' since it isn't a known property of 'div'. ("
</button>
<hr>
<div id="collapseBasic" [collapse]="isCollapsed" [ERROR ->][isAnimated]="true">

我尝试用不同的方式导入,但是我不太理解,因为错误似乎表明将属性绑定到import {Component, TemplateRef, NgModule, OnInit } from '@angular/core'; import {CollapseModule, ModalModule, BsModalService, BsModalRef} from 'ngx-bootstrap'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @Component({ selector: 'summary', templateUrl: './summary.html', styleUrls: ['./summary.scss'] }) @NgModule({ imports: [ BrowserAnimationsModule, CollapseModule.forRoot() ] }) export class MobileBasketSummaryCheckoutComponent { BrowserAnimationsModule; modalRef: BsModalRef; CollapseModule; BsModalRef; isCollapsed = false; isAnimated = false; config = { animated: true, keyboard: true }; constructor(private modalService: BsModalService) {} openModal(template: TemplateRef<any>) { this.modalRef = this.modalService.show(template, this.config); } } 上是一个问题。

我希望输出能够编译/工作,并且切换动画效果

1 个答案:

答案 0 :(得分:0)

isCollapsed变量,用于在视图侧* ngIf =“ isCollapsed”中指定类型boolean

isCollapsed:boolean=true;

isAnimated:boolean=false;

尝试一下:

import {Component, TemplateRef, NgModule, OnInit } from '@angular/core';
import {CollapseModule, ModalModule, BsModalService, BsModalRef} from 'ngx-bootstrap';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@Component({
  selector: 'summary',
  templateUrl: './summary.html',
  styleUrls: ['./summary.scss']
})

@NgModule({
  imports: [
    BrowserAnimationsModule,
    CollapseModule.forRoot()
  ]
})

export class MobileBasketSummaryCheckoutComponent {
  BrowserAnimationsModule;
  modalRef: BsModalRef;
  CollapseModule;
  BsModalRef;
  isCollapsed:boolean=true;
  isAnimated:boolean=false;

  config = {
    animated: true,
    keyboard: true
  };
  constructor(private modalService: BsModalService) {}

  openModal(template: TemplateRef<any>) {
    this.modalRef = this.modalService.show(template, this.config);
  }
}