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 组件都可以正常工作：

未处理的 Promise 拒绝：模板解析错误：无法绑定到 'max' 因为它不是 'progressbar' 的已知属性。 ("

      <progressbar [ERROR ->][max]="max" [value]="dynamic">
        <span style="color:white; white-space:nowrap;">{{dynamic}"): ThreedViewerComponent@85:23 Can't

绑定到“值”，因为它不是“进度条”的已知属性。 ("

      <progressbar [max]="max" [ERROR ->][value]="dynamic">
        <span style="color:white; white-space:nowrap;">{{dynamic}} / {{max}}<"): ThreedViewerComponent@85:35 'progressbar' is not a known

元素： 1.如果'progressbar'是一个Angular组件，那么验证它是这个模块的一部分。 2. 如果 'progressbar' 是一个 Web 组件，则将 "CUSTOM_ELEMENTS_SCHEMA" 添加到该组件的 '@NgModule.schemas' 压制此消息。 ("

      [ERROR ->]<progressbar [max]="max" [value]="dynamic">
        <span style="color:white; white-space:nowrap"): ThreedViewerComponent@85:10 'progressbar' is not a known element:

1。如果 'progressbar' 是一个 Angular 组件，那么验证它是这个模块的一部分。 2. 如果 'progressbar' 是一个 Web 组件，则将 "CUSTOM_ELEMENTS_SCHEMA" 添加到该组件的 '@NgModule.schemas' 压制此消息。 (" [错误->] © 2017 "): ThreedViewerComponent@91:12 ; 区域: ; 任务: Promise.then ; 值: SyntaxError {__zone_symbol__error：错误：模板解析错误：无法绑定到 'max' 因为它不是 'progressbar' 的已知属性。 …, _nativeError：ZoneAwareError，__zone_symbol__currentTask：ZoneTask，__zone_symbol__stack：“错误：模板解析错误：↵无法绑定到‘max’…ttp://localhost:4200/polyfills.bundle.js:3011:35)”， __zone_symbol__message：“模板解析错误：↵Can't bind to 'max' since i... © 2017 ↵”）：ThredViewerComponent@91:12”} 错误： 模板解析错误：无法绑定到“max”，因为它不是已知的 “进度条”的属性。 ("

      <progressbar [ERROR ->][max]="max" [value]="dynamic">
        <span style="color:white; white-space:nowrap;">{{dynamic}"): ThreedViewerComponent@85:23 Can't

绑定到“值”，因为它不是“进度条”的已知属性。 ("

      <progressbar [max]="max" [ERROR ->][value]="dynamic">
        <span style="color:white; white-space:nowrap;">{{dynamic}} / {{max}}<"): ThreedViewerComponent@85:35 'progressbar' is not a known

元素： 1.如果'progressbar'是一个Angular组件，那么验证它是这个模块的一部分。 2. 如果 'progressbar' 是一个 Web 组件，则将 "CUSTOM_ELEMENTS_SCHEMA" 添加到该组件的 '@NgModule.schemas' 压制此消息。 ("

      [ERROR ->]<progressbar [max]="max" [value]="dynamic">
        <span style="color:white; white-space:nowrap"): ThreedViewerComponent@85:10 'progressbar' is not a known element:

1。如果 'progressbar' 是一个 Angular 组件，那么验证它是这个模块的一部分。 2. 如果 'progressbar' 是一个 Web 组件，则将 "CUSTOM_ELEMENTS_SCHEMA" 添加到该组件的 '@NgModule.schemas' 压制此消息。 (" [错误->] © 2017 "): ThreedViewerComponent@91:12 在 SyntaxError.ZoneAwareError (http://localhost:4200/polyfills.bundle.js:3457:33) 在 SyntaxError.BaseError [作为构造函数] (http://localhost:4200/vendor.bundle.js:86968:16) 在新的 SyntaxError (http://localhost:4200/vendor.bundle.js:10223:16) 在 TemplateParser.parse (http://localhost:4200/vendor.bundle.js:22316:19) 在 JitCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:54413:68) 在http://localhost:4200/vendor.bundle.js:54296:62 在 Set.forEach （本机） 在 JitCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:54296:19) 在 createResult (http://localhost:4200/vendor.bundle.js:54178:19) 在 ZoneDelegate.webpackJsonp.807.ZoneDelegate.invoke (http://localhost:4200/polyfills.bundle.js:2799:26) 在 Zone.webpackJsonp.807.Zone.run (http://localhost:4200/polyfills.bundle.js:2591:43) 在http://localhost:4200/polyfills.bundle.js:3178:57 在 ZoneDelegate.webpackJsonp.807.ZoneDelegate.invokeTask (http://localhost:4200/polyfills.bundle.js:2832:31) 在 Zone.webpackJsonp.807.Zone.runTask (http://localhost:4200/polyfills.bundle.js:2631:47) 在 drainMicroTaskQueue (http://localhost:4200/polyfills.bundle.js:3011:35)

你能帮忙吗？

Answer 1

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

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

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