【问题标题】:ngb-progressbar does not appearngb-progressbar 没有出现
【发布时间】:2019-04-16 10:50:07
【问题描述】:

我正在将 ngb-progress bar 实现到我的 html 中,当我将它添加到我的代码中时,它会出现在控制台中。我可以更改和编辑宽度和高度,并且 div 占用空间,但是,进度条本身不显示。只是空白的地方。

<div>
    <p>
        <ngb-progressbar [max]="100" [value]="25"></ngb-progressbar>
    </p>
</div>

这是控制台中的视图:

<div _ngcontent-c7="">
    <p _ngcontent-c7="">
        <ngb-progressbar _ngcontent-c7="" ng-reflect-max="100" ng-reflect-value="25">
            <div class="progress">
                <div aria-valuemin="0" role="progressbar" class="progress-bar" aria-valuenow="25" aria-valuemax="100" style="width: 50%;height: 5em;">
                    <!--bindings={
                        "ng-reflect-ng-if": "false"
                    }-->
                </div>
            </div>
        </ngb-progressbar>
     </p>
</div>

【问题讨论】:

    标签: html progress-bar ng-bootstrap


    【解决方案1】:

    您似乎忘记了包含 Bootstrap CSS。请注意,ng-bootstrap 需要 Bootstrap CSS 4.0.0 或更高版本。

    【讨论】:

    • 我跑了 npm install bootstrap@4.0.0 但仍然没有区别。我不相信这是一个引导问题,否则它会在构建时引发错误
    • 我很确定它引导 CSS 问题。缺少 CSS 不会引发任何错误(构建或运行时)。仅在 bootstrap@4.0.0 上执行 npm install 还不够,您实际上必须在页面中 include 这个 CSS...
    • 它是我的 package.json 文件的一部分,我不需要将它包含在模块负责合并 ngb 组件的页面中,但这个只是没有显示
    • ngb 组件将包含 CSS。您必须将它包含在您的页面中(这里的 ng-bootstrap 作者对此非常积极:-))
    • 天哪,它成功了!我不知道他们没有合并 CSS 我对此还是很陌生。谢谢你对我的耐心!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2022-06-19
    • 1970-01-01
    • 2020-02-25
    • 2021-06-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多