首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

引导手风琴在angular 9中不起作用

在Angular 9中,引导手风琴(Accordion)不起作用可能是由于以下几个原因:

  1. 错误的组件引用:首先,确保你已经正确地导入了引导手风琴组件。在Angular中,你需要在组件的模块文件中导入并声明引导手风琴组件,例如:
代码语言:txt
复制
import { AccordionComponent } from 'ngx-bootstrap/accordion';

@NgModule({
  declarations: [
    // ...
    AccordionComponent
  ],
  // ...
})
export class YourModule { }
  1. 错误的指令使用:确保你在模板中正确地使用了引导手风琴指令。在Angular中,你需要使用bsAccordion指令来包裹手风琴的内容,例如:
代码语言:txt
复制
<accordion [closeOthers]="true">
  <accordion-group heading="Group 1">
    Content of group 1
  </accordion-group>
  <accordion-group heading="Group 2">
    Content of group 2
  </accordion-group>
</accordion>
  1. 缺少必要的依赖:引导手风琴组件可能依赖于其他一些模块或库。确保你已经正确地安装和导入了这些依赖项。例如,如果你使用的是ngx-bootstrap库中的引导手风琴组件,你需要先安装ngx-bootstrap并导入相关模块,例如:
代码语言:txt
复制
npm install ngx-bootstrap --save
代码语言:txt
复制
import { AccordionModule } from 'ngx-bootstrap/accordion';

@NgModule({
  imports: [
    // ...
    AccordionModule.forRoot()
  ],
  // ...
})
export class YourModule { }
  1. 版本不兼容:如果你使用的是较旧的版本的Angular或相关库,可能会导致引导手风琴不起作用。请确保你的Angular版本和相关库的版本与引导手风琴的要求兼容。

总结起来,要使引导手风琴在Angular 9中起作用,你需要正确地导入引导手风琴组件、使用正确的指令、安装必要的依赖,并确保版本兼容性。如果你使用的是ngx-bootstrap库中的引导手风琴组件,你可以参考ngx-bootstrap的文档(https://valor-software.com/ngx-bootstrap/#/accordion)了解更多信息和示例代码。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

2021 年 Angular vs. React vs. Vue 前端框架对比

这就是为什么我们决定为你创建一个简短的指南,但最重要的是,为你提供一个参考帮助你未来进行技术选择。 让我们开始吧! 许可证 当然,使用一个开源框架或库之前,一定要彻底检查许可证。...幸运的是,React、Angular 和 Vue 都使用 MIT 许可证。它提供了有限的复用限制,而且我们甚至还可以专有软件中使用。使用任何框架或软件之前,一定要留心,注意了解许可证的内容。... Angular 框架中,每个组件都有一个类或模板,定义了应用逻辑和 MetaData(装饰器)。组件的这些元数据为创建和呈现其视图所需的构件在哪里提供了指引。...React 最适合以下项目: 对于涉及包含导航项,折叠或展开的手风琴分节,可用或不可用状态,动态输入,可用或不可用按钮,用户登录,用户访问权限等的许多组件的应用程序。...各自的优点 Angular 有对模板、表单、引导程序或架构、组件以及组件之间交互的完整的文档: 平滑的双向数据绑定。 MVC 架构。 内置模块系统。 大大减少了网页的初始加载时间。

2.2K10

Angular中sweetalert弹框的使用详解

所以我就想办法将sweetalert用到项目中,项目中引入sweetalert时,遇到诸多问题,但最终我不懈坚持下,都解决了,实现了效果。具体用法请看下文。...一定要注意版本,如果angular-sweetalert版本过高,所依赖的文件angular版本过低,会导致引入报错。...三、引入文件 sweetalert/sweetalert.min.css angular/angular.min.js angular-sweetalert/SweetAlert.min.js sweetalert...2、API问题 在这个版本中以下写法只能实现title和text的效果,其他属性都不起作用 1 swal({ 2 title: "确定删除吗?"..., "success"); 12 }); 在这个版本中只能按照我最上面所列举的去实现,那是我官方英文文档中发现的,中文文档太坑了。

2.7K40

Angular 应用是怎么工作的?

Note:接到新任务时候,开始一个新的 Angular 应用之前,我都会先看 angular.json 和 package.json 文件。我会通过这两个文件了解应用的初始信息。...应用通过 bootstrapModule 引导启动。 入口已确定,那什么是引导(What's bootstrapping) 每个应用至少有一个 Angular 模块。...root 根模块引导你启动引用,被称为启动模块。 因此,bootstrapping 就像是一种装置或说一种加载的技术,启动 Angular 应用。当我们加载组件或者模块的时候,它将被渲染。...@NgModule 装饰器中,我们有一个引导 bootstrap 数组,表明加载 AppComponent。...index.html 这个文件最终调用根组件,也就是 app-root ,这个组件文件 app.component.ts 中被定义。如下index.html 文件。 <!

1.4K30

Angular 初始化显示出大括号语法的解决方法(ngCloak)

在做angular的SPA开发时,我们经常会遇见如Chrome这类能够快速解析的浏览器上出现表达式({{ express }} ),或者是模块(div)的闪烁。...angular中为我们提供了ng-cloak来实现纺织闪烁的方案,我们只需要在需要的地方加上ng-cloak。...将带有ng-clock的的元素设置为display:none,隐藏掉,等到angular解析到带有ng-clock的节点时候,会把attribute和class同时remove掉,这样就可以实现防止节点的闪烁...$set('ngCloak', undefined); element.removeClass('ng-cloak'); } }); angular.js的最后一段代码中能看见前面所说的增加...(如果你也遇见了加了ng-cloak还不起作用的话,那么试试直接引入css文件吧)

1.5K10

Angular 2 架构(上)

扩展的 HTML 语法组成,组件 (Components)类用来管理这些模板,应用逻辑部分通过服务 (Services)来完成,然后模块中打包服务与组件,最后通过引导根模块来启动应用。...,开发过程通常在 main.ts 文件中来引导 AppModule ,代码如下: app/main.ts 文件: import { platformBrowserDynamic } from '@angular...创建 Angular 组件的方法有三步: 从 @angular/core 中引入 Component 修饰器 建立一个普通的类,并用 @Component 修饰它 @Component 中,设置 selector...以下是一个简单是实例: 网站地址 : {{site}} Angular中,默认使用的是双大括号作为插值语法,大括号中间的值通常是一个组件属性的变量名。...你可以把元数据附加到这个类上来告诉 Angular Component 是一个组件。 TypeScript 中,我们用 装饰器 (decorator) 来附加元数据。

1.4K10

AngularDart4.0 英雄之旅-教程-07路由 顶

更新pubspec 使用Angular路由(angular_router)启用导航。 由于路由器自己的包中,首先将该包添加到应用的pubspec: ?...'; 使路由器可用 要告诉Angular您的应用使用路由,请在应用的引导程序功能中指定ROUTER_PROVIDERS:web/main.dart import 'package:angular/angular.dart...Angular注入HeroService,您可以DashboardComponent中使用它。 获取英雄 dashboard_component.dart中,添加以下导入语句。...仪表板或英雄列表中选择英雄不起作用。 你会接下来的处理。 选择一个仪表板英雄 当用户选择仪表板中的英雄时,应用程序应该导航到HeroDetailComponent以允许用户查看和编辑选择的英雄。...查看详细信息按钮不起作用。 更新HeroesComponent类 响应按钮单击,HeroesComponent导航到HeroesDetailComponent。

17.5K30

【17】进大厂必须掌握的面试题-50个Angular面试

Angular中的自举是什么? Angular中进行引导只是初始化或启动Angular应用程序。Angular支持自动和手动引导。...自动引导程序:这是通过将ng-app指令添加到应用程序的根目录来完成的,通常是标记或标记上(如果您希望angular自动引导应用程序)。...当Angular找到ng-app指令时,它将加载与其关联的模块,然后编译DOM。 手动引导: 手动引导为您提供了有关如何以及何时初始化Angular应用程序的更多控制。...48.Angular中解释ng-app指令。 ng-app指令用于定义Angular应用程序,使我们可以Angular应用程序中使用自动引导。...它表示Angular应用程序的根元素,通常在或标签附近声明。HTML文档中可以定义任何数量的ng-app指令,但是只有一个Angular应用程序可以被隐式地正式引导。其余应用程序必须手动引导

41.2K51

AngularDart4.0 指南- 依赖注入 顶

你很少自己创建一个Angular注入器。 Angular执行应用程序时为您创建注入器,从引导过程中创建的根注入器开始。 注入器可以创建该服务之前,您必须向providers注册注入器。...应用程序web / main.dart中引导: import 'package:angular/angular.dart'; import 'package:dependency_injection/...这就是为什么不鼓励使用引导注册应用程序特定服务的原因。 首选的方法是应用组件中注册应用服务。...以下是引导程序提供程序的一个更实际的示例,摘自教程,第5部分。它还说明了您将会在本页后面介绍的更高级的概念。.....注解帮助将配置对象注入到任何需要它的构造函数中: AppComponent(@Inject(appConfigToken) Map config) : title = config['title']; 虽然Map接口依赖注入中不起作用

5.6K20

AngularDart4.0 英雄之旅-教程-08HTTP 顶

你离开的地方 在前一页中,您学会了仪表板和固定英雄列表之间导航,沿途编辑选定的英雄。 这是这个页面的起点。 继续英雄之旅之前,请确认您具有以下结构。 ?...因此,请在启动应用程序及其根AppComponent的引导程序调用中注册它。...web/main.dart (v1) import 'package:angular/angular.dart'; import 'package:angular_router/angular_router.dart...BrowserClient, useFactory: () => new BrowserClient(), deps: []) ]); } 请注意,您在列表中提供了BrowserClient,作为引导方法的第二个参数...注意:除非您有适当配置的后端服务器(或模拟服务器),否则此应用程序不起作用。 下一节将展示如何模拟与后端服务器的交互。

11K30

Angular 从入坑到挖坑 - 模块简介

NgModule 简介 Angular 应用中,至少会存在一个 NgModule,也就是应用的根模块(AppModule),通过引导这个根模块就可以启动整个项目 像开发中使用到 FormsModule...、HttpClientModule 这种 Angular 内置的库也都是一个个的 NgModule,开发中通过将组件、指令、管道、服务或其它的代码文件聚合成一个内聚的功能块,专注于系统的某个功能模块...http 请求 JavaScript 模块与 NgModule JavaScript 中,每一个 js 文件就是一个模块,文件中定义的所有对象都从属于那个模块。...每个组件都只能声明一个 NgModule 类中,同时,如果你使用了未声明过的组件,Angular 将会报错 同样的,对于当前模块使用到的自定义指令、自定义管道,也需要在 declarations 数组中进行声明...应用通过引导根模块来启动的,因为会涉及到构建组件树,形成实际的 DOM,因此需要在 bootstrap 数组中添加根组件用来作为组件树的根 3.3、特性模块 特性模块是用来将特定的功能或具有相关特性的代码从其它代码中分离出来

1.8K20

使用Angular CLI生成 Angular 5项目

Angular CLI 官网: https://github.com/angular/angular-cli 安装angular cli: npm install -g @angular/cli 不过首先要确保您安装了比较新版本的...但是对已经生成的components/directives就不起作用了. 那么如何保证生成的项目的components/directives前缀是您想要的呢?...查看angular-cli.json, 可以文件的下方看到采用的是scss样式文件: ? 这样, 以后生成的component的默认样式文件就是scss了....综上, ng new 的这些参数可以在生成项目的时候作为命令的参数联合使用, 其中有一些参数也可以项目生成以后通过修改angular-cli.json文件来做修改....如果我该项目目录执行: ng set defaults.styleExt css 那么该项目的设置就会改变: ?

1.9K30
领券