Question

我在角度进度中使用ng-cycle-progress。 HTML：

<circle-progress
  [percent]="score"
  [radius]="100"
  [outerStrokeWidth]="16"
  [innerStrokeWidth]="8"
  [outerStrokeColor]="'#78C000'"
  [innerStrokeColor]="'#C7E596'"
  [animation]="true"
  [animationDuration]="300"
></circle-progress>

我正在.ts文件中动态设置得分。但是，渲染进度条时出现错误。有人可以在这里帮我吗。 TIA。

编辑：我收到的错误是：

Error: "Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[CircleProgressComponent -> CircleProgressOptions]: 
  StaticInjectorError(Platform: core)[CircleProgressComponent -> CircleProgressOptions]: 
    NullInjectorError: No provider for CircleProgressOptions!
get@http://localhost:4200/vendor.js:68202:27
resolveToken@http://localhost:4200/vendor.js:69988:24
tryResolveToken@http://localhost:4200/vendor.js:69914:16
get@http://localhost:4200/vendor.js:69777:20
resolveToken@http://localhost:4200/vendor.js:69988:24
tryResolveToken@http://localhost:4200/vendor.js:69914:16
get@http://localhost:4200/vendor.js:69777:20
resolveNgModuleDep@http://localhost:4200/vendor.js:93827:29
get@http://localhost:4200/vendor.js:94915:16
resolveDep@http://localhost:4200/vendor.js:95445:45
createClass@http://localhost:4200/vendor.js:95293:29
createDirectiveInstance@http://localhost:4200/vendor.js:95109:22
createViewNodes@http://localhost:4200/vendor.js:105739:38
callViewAction@http://localhost:4200/vendor.js:106189:13
execComponentViewsAction@http://localhost:4200/vendor.js:106094:13
createViewNodes@http://localhost:4200/vendor.js:105768:5
createRootView@http://localhost:4200/vendor.js:105611:5
callWithDebugContext@http://localhost:4200/vendor.js:107140:27
debugCreateRootView@http://localhost:4200/vendor.js:106377:12
create@http://localhost:4200/vendor.js:94251:31
create@http://localhost:4200/vendor.js:90215:29
createComponent@http://localhost:4200/vendor.js:94407:47
activateWith@http://localhost:4200/vendor.js:161557:40
activateRoutes@http://localhost:4200/vendor.js:157474:40
activateChildRoutes/<@http://localhost:4200/vendor.js:157411:18
activateChildRoutes@http://localhost:4200/vendor.js:157406:29
activate@http://localhost:4200/vendor.js:157269:14
activateRoutes/<@http://localhost:4200/vendor.js:157242:10
_next@http://localhost:4200/vendor.js:225544:35
next@http://localhost:4200/vendor.js:221057:18
_next@http://localhost:4200/vendor.js:227911:26
next@http://localhost:4200/vendor.js:221057:18
_next@http://localhost:4200/vendor.js:225550:26
next@http://localhost:4200/vendor.js:221057:18
notifyNext@http://localhost:4200/vendor.js:227587:26
_next@http://localhost:4200/vendor.js:220352:21
next@http://localhost:4200/vendor.js:221057:18
 .......

Answer 1

更改您的app.module.ts：

import { NgCircleProgressModule } from 'ng-circle-progress';

==>

import { NgCircleProgressModule } from './ng-circle-progress.module';

然后导入

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,




  // Specify ng-circle-progress as an import
    NgCircleProgressModule.forRoot({
      // set defaults here
      radius: 100,
      outerStrokeWidth: 16,
      innerStrokeWidth: 8,
      outerStrokeColor: "#700000",
      innerStrokeColor: "#C7E596",
      animationDuration: 300,
      ...
    })

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

更改您的app.component.ts：

import { CircleProgressComponent, CircleProgressOptions } from 'ng-circle-progress';

https://github.com/bootsoon/ng-circle-progress/issues/42

https://www.npmjs.com/package/ng-circle-progress

Answer 2

您未提供默认的CircleProgressOptions。请在模块中提供默认的CircleProgressOptions。

Stackblitz Demo

NgCircleProgressModule.forRoot({
      // set defaults here
      radius: 100,
      outerStrokeWidth: 16,
      innerStrokeWidth: 8,
      outerStrokeColor: "#78C000",
      innerStrokeColor: "#C7E596",
      animationDuration: 300,
      ...
})

ng-circle-progress中的可变百分比

2 个答案: