无法看到ngBootstrap设计的进度条。 -角4+

Question

我找不到我想念的东西。无法查看@ngbootstrap进度栏。控制台中没有错误。

尝试复制this

progressBar.html

<div class="container">
<!--<ngbd-progressbar-showvalue></ngbd-progressbar-showvalue>-->

<p><ngb-progressbar showValue="true" type="success" [value]="25"></ngb-progressbar></p>
<p><ngb-progressbar [showValue]="true" type="info" [value]="50"></ngb-progressbar></p>
<p><ngb-progressbar showValue="true" type="warning" [value]="150" [max]="200"></ngb-progressbar></p>
<p><ngb-progressbar [showValue]="true" type="danger" [value]="150" [max]="150"></ngb-progressbar></p>
</div>

module.ts

import { NgModule } from '@angular/core';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
@NgModule({
  imports: [NgbModule],
  declarations: [firstComponent, secondComponent,thirdComponent,progressComponent,
})

progressComponent.ts

@Component(
{
    selector: 'ngbd-progressbar-showvalue',
    // template:'<p><ngb-progressbar  showValue= "true" type="success" [value]="25"></ngb-progressbar></p>'
    /*<p><ngb-progressbar [showValue]= "true" type="info"    [value]="50"></ngb-progressbar></p>
      <p><ngb-progressbar showValue= "true"  type="warning" [value]="150"" [max]="200"></ngb-progressbar></p>'
     */
    // ,
    templateUrl: './skills.component.html',
    /*styleUrls: ['./skills.component.scss']*/
    styles: [`
ngb-progressbar {
margin-top: 5rem;
}
`]
})

，但其显示的值很简单，例如下面的附件，没有进度条。

cli版本

Angular CLI: 6.0.8
Node: 9.3.0
OS: win32 ia32
Angular: 6.0.7
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.8
@angular-devkit/build-angular     0.6.8
@angular-devkit/build-optimizer   0.6.8
@angular-devkit/core              0.6.8
@angular-devkit/schematics        0.6.8
@angular/cdk                      6.3.2
@angular/cli                      6.0.8
@angular/material                 6.3.2
@ngtools/webpack                  6.0.8
@schematics/angular               0.6.8
@schematics/update                0.6.8
rxjs                              6.2.1
typescript                        2.7.2
webpack                           4.8.3

感谢您的帮助

Answer 1

在链接下方添加

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

在您的 index.html 文件中。这是CSS工作所必需的。 如果您可以下载文件，将该文件保存在资产文件夹中，然后将链接添加到index.html中的文件，例如

，那将是更好的做法。

<link rel="stylesheet" href="assets/css/bootstrap.min.css" type="text/css">

通过这种方式，如果在 bootstrap.min.css 父链接中进行了任何更改，您的项目将不会受到影响。