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
绑定到'value'，因为它不是'progressbar'的已知属性。（”
      <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' 压制此消息。（” [错误 - ＆gt;] ©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：“模板解析错误：↵不能绑定到'max'，因为我...©2017↵”）：ThreedViewerComponent @ 91：12“}错误：模板解析错误：无法绑定到'max'，因为它不是已知的 'progressbar'的属性。（”
      <progressbar [ERROR ->][max]="max" [value]="dynamic">
        <span style="color:white; white-space:nowrap;">{{dynamic}"): ThreedViewerComponent@85:23 Can't
绑定到'value'，因为它不是'progressbar'的已知属性。（”
      <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' 压制此消息。（” [错误 - ＆gt;] ©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 at Set.forEach（native）在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)，然后加载其他模块。

ng2-bootstrap进度条不起作用

1 个答案: