ng2-bootstrap 进度条不工作

Question

我在使用 angular-cli 构建的 Angular 2 应用程序中使用 ng2-bootstrap 进度条组件。根据 ng2-bootstrap 团队的建议，我已经声明并使用了进度条组件，如下所示：

import { AlertModule, AccordionModule, ModalModule, ProgressbarModule  } from 'ng2-bootstrap';
import { ThreedViewerComponent} from './threed-viewer/threed-viewer.component';

@NgModule({
  declarations: [
    AppComponent,
    ThreedViewerComponent,
  ],
  imports: [
    ...        
    AlertModule.forRoot(),
    AccordionModule.forRoot(),
    ModalModule.forRoot(),
    ProgressbarModule.forRoot(),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
  public customClass: string = 'customClass';
  public isFirstOpen: boolean = true;
}

以下是我的HTML:

<progressbar [max]="max" [value]="dynamic">
    <span style="color:white; white-space:nowrap;">{{dynamic}} / {{max}}</span>
</progressbar>

最后是我的组件：

@Component({
  selector: ...  
  templateUrl: ...
})
export class myComponent{
  public max: number = 200;
  public showWarning: boolean;
  public dynamic: number;
  public type: string;

  ...
}

当我为应用程序提供服务时，进度条生成以下错误，但所有其他 ng2-bootstrap 组件工作正常：

Unhandled Promise rejection: Template parse errors: Can't bind to 'max' since it isn't a known property of 'progressbar'. ("
      <progressbar [ERROR ->][max]="max" [value]="dynamic">
        <span style="color:white; white-space:nowrap;">{{dynamic}"): ThreedViewerComponent@85:23 Can't
bind to 'value' since it isn't a known property of 'progressbar'. ("
      <progressbar [max]="max" [ERROR ->][value]="dynamic">
        <span style="color:white; white-space:nowrap;">{{dynamic}} / {{max}}<"): ThreedViewerComponent@85:35 'progressbar' is not a known
element: 1. If 'progressbar' is an Angular component, then verify that it is part of this module. 2. If 'progressbar' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
      [ERROR ->]<progressbar [max]="max" [value]="dynamic">
        <span style="color:white; white-space:nowrap"): ThreedViewerComponent@85:10 'progressbar' is not a known element:
1. If 'progressbar' is an Angular component, then verify that it is part of this module. 2. If 'progressbar' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. (" [ERROR ->] © 2017 "): ThreedViewerComponent@91:12 ; Zone: ; Task: Promise.then ; Value: SyntaxError {__zone_symbol__error: Error: Template parse errors: Can't bind to 'max' since it isn't a known property of 'progressbar'. …, _nativeError: ZoneAwareError, __zone_symbol__currentTask: ZoneTask, __zone_symbol__stack: "Error: Template parse errors:↵Can't bind to 'max' …ttp://localhost:4200/polyfills.bundle.js:3011:35)", __zone_symbol__message: "Template parse errors:↵Can't bind to 'max' since i… © 2017 ↵"): ThreedViewerComponent@91:12"} Error: Template parse errors: Can't bind to 'max' since it isn't a known property of 'progressbar'. ("
      <progressbar [ERROR ->][max]="max" [value]="dynamic">
        <span style="color:white; white-space:nowrap;">{{dynamic}"): ThreedViewerComponent@85:23 Can't
bind to 'value' since it isn't a known property of 'progressbar'. ("
      <progressbar [max]="max" [ERROR ->][value]="dynamic">
        <span style="color:white; white-space:nowrap;">{{dynamic}} / {{max}}<"): ThreedViewerComponent@85:35 'progressbar' is not a known
element: 1. If 'progressbar' is an Angular component, then verify that it is part of this module. 2. If 'progressbar' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
      [ERROR ->]<progressbar [max]="max" [value]="dynamic">
        <span style="color:white; white-space:nowrap"): ThreedViewerComponent@85:10 'progressbar' is not a known element:
1. If 'progressbar' is an Angular component, then verify that it is part of this module. 2. If 'progressbar' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. (" [ERROR ->] © 2017 "): ThreedViewerComponent@91:12 at SyntaxError.ZoneAwareError (http://localhost:4200/polyfills.bundle.js:3457:33) at SyntaxError.BaseError [as constructor] (http://localhost:4200/vendor.bundle.js:86968:16) at new SyntaxError (http://localhost:4200/vendor.bundle.js:10223:16) at TemplateParser.parse (http://localhost:4200/vendor.bundle.js:22316:19) at JitCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:54413:68) at http://localhost:4200/vendor.bundle.js:54296:62 at Set.forEach (native) at JitCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:54296:19) at createResult (http://localhost:4200/vendor.bundle.js:54178:19) at ZoneDelegate.webpackJsonp.807.ZoneDelegate.invoke (http://localhost:4200/polyfills.bundle.js:2799:26) at Zone.webpackJsonp.807.Zone.run (http://localhost:4200/polyfills.bundle.js:2591:43) at http://localhost:4200/polyfills.bundle.js:3178:57 at ZoneDelegate.webpackJsonp.807.ZoneDelegate.invokeTask (http://localhost:4200/polyfills.bundle.js:2832:31) at Zone.webpackJsonp.807.Zone.runTask (http://localhost:4200/polyfills.bundle.js:2631:47) at drainMicroTaskQueue (http://localhost:4200/polyfills.bundle.js:3011:35)

你能帮忙吗？

Answer 1

请将您的导入更改为此，然后重试：

imports: [
    AlertModule.forRoot(),
    AccordionModule.forRoot(),
    ModalModule.forRoot(),
    ProgressbarModule.forRoot(),
    ...        
  ],

首先加载所有 bootstrap 模块 (AlertModule, AccordionModule, ModalModule, ProgressbarModule)，然后加载其他模块。

ng2-bootstrap 进度条不工作

ng2-bootstrap progressbar not working

ng2-bootstrap

angular