Question

我正在尝试将Bootstrap手风琴添加到下面的Angular应用程序中：

<div class="accordion" id="accordionExample">
    <div class="card">
        <div class="card-header" id="headingOne">
            <h5 class="mb-0">
                <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                    Collapsible Group Item #1
                </button>
            </h5>
        </div>

        <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
            <div class="card-body">
                Anim
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header" id="headingTwo">
            <h5 class="mb-0">
                <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                    Collapsible Group Item #2
                </button>
            </h5>
        </div>
        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
            <div class="card-body">
            Anim
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header" id="headingThree">
            <h5 class="mb-0">
                <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                    Collapsible Group Item #
                </button>
            </h5>
        </div>
        <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
            <div class="card-body">
                Anim
            </div>
        </div>
    </div>
</div>

在构建之前，我运行了以下NPM安装：

npm我引导

npm i ngx-bootstrap

但是当我单击手风琴标题之一时，什么都没有发生。有人可以告诉我我缺少哪一部分设置吗？非常感谢！

Answer 1

您正在使用引导程序的“普通”版本。

确保已在全局styles.css或style.scss文件中将引导程序样式添加到应用程序中：

CSS版本

@import '~bootstrap/dist/css/bootstrap.min.css';

SCSS版本

@import "~bootstrap/scss/bootstrap";

将AccordionModule中的ngx-bootstrap导入您的AppModule。

import { AccordionModule } from 'ngx-bootstrap/accordion';

@NgModule({
  imports: [AccordionModule.forRoot(),...]
})
export class AppModule{}

使用ngx-bootstrap中可用的组件，而不要使用“纯” html版本：

<accordion>
  <accordion-group heading="Static Header">
    This content is straight in the template.
  </accordion-group>
  <accordion-group heading="Another group">
    <p>Some content</p>
  </accordion-group>
  <accordion-group heading="Another group">
    <p>Some content</p>
  </accordion-group>
  <accordion-group heading="Another group">
    <p>Some content</p>
  </accordion-group>
</accordion>

Install instructions for ngx-bootstrap

Accordion Component of ngx-bootstrap

添加动画

要添加动画，您需要将属性isAnimated添加到父组件accordion：

<accordion [isAnimated]="true">
<!-- ... -->
</accordion>

只打开一只手风琴

要仅打开一个手风琴，您需要将属性closeOthers添加到父组件accordion：

<accordion [isAnimated]="true" [closeOthers]="true">
<!-- ... -->
</accordion>

Answer 2

尝试此命令

array(
            'post_type'   => 'event',
            'meta_key'    => 'date_and_time_of_event',
            'orderby'     => 'meta_value',
            'order'       => 'ASC',

     )

编辑 Angular.json 文件后，修改npm install bootstrap@4 jquery --save和"style":["put here your bootstrap.css file "]

如何将Bootstrap手风琴添加到Angular应用

2 个答案: