【问题标题】:Angular SVG round progressbar not work for IonicAngular SVG圆形进度条不适用于Ionic
【发布时间】:2018-04-14 13:04:10
【问题描述】:

我为我的 ionic 项目阅读并安装了这个 Angular SVG round progressbar,但它对我不起作用,
https://github.com/crisbeto/angular-svg-round-progressbar

如何正确添加这个我的页面?请帮我解决这个问题 显示此错误

Error: Template parse errors:
Can't bind to 'current' since it isn't a known property of 'round-progress'.
1. If 'round-progress' is an Angular component and it has 'current' input, then verify that it is part of this module.
2. If 'round-progress' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component

禁止显示此消息。 3. 要允许任何属性,请将“NO_ERRORS_SCHEMA”添加到该组件的“@NgModule.schemas”。 ("

  <round-progress [ERROR ->][current]="48" [max]="100"></round-progress>
</ion-content>

")

谢谢

我添加了我的页面 home.html

<round-progress
    [current]="current"
    [max]="max"
    [color]="'#45ccce'"
    [background]="'#eaeaea'"
    [radius]="125"
    [stroke]="20"
    [semicircle]="true"
    [rounded]="true"
    [clockwise]="false"
    [responsive]="false"
    [duration]="800"
    [animation]="'easeInOutQuart'"
    [animationDelay]="0"
    (onRender)="doSomethingWithCurrentValue($event)"></round-progress>

home.ts

import { Component,NgModule } from '@angular/core';
import {RoundProgressModule} from 'angular-svg-round-progressbar';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',


})
@NgModule({
  imports: [RoundProgressModule]
})
export class HomePage {

  constructor(public navCtrl: NavController,private _config: RoundProgressConfig) {
 _config.setDefaults({
  color: '#f00',
  background: '#0f0'
});
  }

}

【问题讨论】:

    标签: angular typescript ionic-framework ionic2 ionic3


    【解决方案1】:

    更新:您需要使用旧版本,如下所示。当前版本存在我在下面提到的问题。

    npm install angular-svg-round-progressbar@1.1.1 --save
    

    Working Git Repo is here

    您只需将其添加到页面的模块中,如下所示。

    home.module.ts

    import {RoundProgressModule} from 'angular-svg-round-progressbar';
    
    @NgModule({
      declarations: [
        HomePage,
      ],
      imports: [
        IonicPageModule.forChild(HomePage),
        RoundProgressModule
      ],
    })
    export class HomePageModule { }
    

    注意:

    这个模块似乎有一个新问题。我已经记录了它。我们必须等到他们给出解决方案。Git issue is here

    【讨论】:

    • 请看更新
    • 先生,我有以下错误错误:模板解析错误:`无法绑定到“当前”,因为它不是“循环进度”的已知属性。 1.如果'round-progress'是一个Angular组件并且它有'current'输入,那么验证它是这个模块的一部分。 2. 如果 'round-progress' 是一个 Web 组件,则将 'CUSTOM_ELEMENTS_SCHEMA' 添加到该组件的 '@NgModule.schemas' 以禁止显示此消息。 3. 要允许任何属性,请将“NO_ERRORS_SCHEMA”添加到该组件的“@NgModule.schemas”。 ("`
    • 你能 fork 这个 repo 吗?它工作正常:github.com/Sampath-Lokuge/svgapp
    • 先生,您的 Repo 出现错误错误:未捕获(承诺中):错误:模块“HomePageModule”导入的意外值“RoundProgressModule”。请添加@NgModule 注释。错误:由模块“HomePageModule”导入的意外值“RoundProgressModule”。请添加@NgModule 注释。
    【解决方案2】:

    尝试在模块组件中添加架构并检查

        @NgModule({
          imports: [RoundProgressModule],
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
        })
    

    【讨论】:

    • 不工作先生,添加后找不到名称CUSTOM_ELEMENTS_SCHEMA
    • import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core' 添加这个
    • RoundProgressConfig is allays 得到红色
    • 还是不行,先生,怎么回事,我听不懂
    • 我从未尝试过这个插件。只是为您的错误消息提供答案。您是否遇到任何错误或渲染不正确?
    猜你喜欢
    • 1970-01-01
    • 2016-07-01
    • 1970-01-01
    • 2017-01-16
    • 2015-03-16
    • 1970-01-01
    • 2017-02-04
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多