正文 

当前位置： 首页 > 知识 >

Angular SVG圆形进度条不适用于Ionic

     2023-03-13     151

关键词：

【中文标题】Angular SVG圆形进度条不适用于Ionic【英文标题】：Angular SVG round progressbar not work for 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'
);

【问题讨论】：

【参考方案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 注释。 让我们continue this discussion in chat。【参考方案2】：

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

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

【讨论】：

不工作先生，添加后找不到名称CUSTOM_ELEMENTS_SCHEMA import CUSTOM_ELEMENTS_SCHEMA from '@angular/core' 添加这个 RoundProgressConfig is allays 得到红色 还是不行，先生，怎么回事，我听不懂 我从未尝试过这个插件。只是为您的错误消息提供答案。您是否遇到任何错误或渲染不正确？

svg的圆形进度条(代码片段)

 目前发现svg实现一些动画效果是比较高效简单的。如圆形进度条，只要会stroke-dasharray与stroke-dashoffset属性基本就可以实现，而且美观。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title 查看详情

表单验证不适用于 Ionic 2 中的 Angular 2 FormBuilder

】表单验证不适用于Ionic2中的Angular2FormBuilder【英文标题】：FormvalidationisnotworkingwithAngular2FormBuilderinIonic2【发布时间】：2017-02-0523:45:01【问题描述】：我正在构建一个Ionic2（打字稿）应用程序。在复选框（ion-checkbox标记）中的简... 查看详情

Cordova 的插件（屏幕方向/应用程序版本）不适用于 Ionic 5 / Angular 11

】Cordova的插件（屏幕方向/应用程序版本）不适用于Ionic5/Angular11【英文标题】：Cordova\'splugins(screen-orientation/app-version)notworkingonIonic5/Angular11【发布时间】：2021-08-1703:04:57【问题描述】：编辑-TLDR；我有两个插件cordova-plugin-screen-orie... 查看详情

水平进度条不适用于 Asynctask Android 下载文件？

】水平进度条不适用于AsynctaskAndroid下载文件？【英文标题】：HorizontalProgressBarNotWorkinginAsynctaskAndroidForDownloadfile?【发布时间】：2014-07-2417:50:27【问题描述】：我正在尝试使用Asynctask显示水平进度条，但它不适合我。它不是显示百... 查看详情

带有图像和圆形进度条的圆形按钮

】带有图像和圆形进度条的圆形按钮【英文标题】：Circularbuttonwithimageandcircularprogressbar【发布时间】：2019-12-2819:29:53【问题描述】：我正在尝试制作一个按钮，里面有一个图像，外面有一个圆形进度条，按下按钮后是彩色的。我... 查看详情

Cordova 插件不适用于 ionic

...发布时间】：2014-10-3007:38:20【问题描述】：我有一个使用Angular构建的Ionic应用程序。我使用的是日历插件：https://github.com/EddyVerbruggen/Calendar-PhoneGap-Plugin我想通过插件创建事件并将它们保存到本地设备的日历中。我已经添加了插... 查看详情

角不适用于android drawable中的环形

...2019-06-2315:57:20【问题描述】：我正在尝试实现一个简单的圆形进度条。它工作正常，但我似乎无法使进度圈的角变圆。我正在尝试实现这样的目标：我的代码：<?xmlversion="1.0"encoding="UTF-8"?><layer 查看详情

css 过渡动画不适用于 svg 路径的“d”属性更改

...尝试将css转换应用于svg各种元素。transition:all2s非常适合圆形，但不适用于路径。还有比“全部”更具体的东西吗？编辑：下面的链接有更 查看详情

进度条不适用于 zipfile？当程序似乎挂起时如何提供反馈

】进度条不适用于zipfile？当程序似乎挂起时如何提供反馈【英文标题】：ProgressBarnotavailableforzipfile?Howtogivefeedbackwhenprogramseemstohang【发布时间】：2017-02-2404:03:15【问题描述】：我对C#和一般编码相当陌生，因此其中一些可能会以... 查看详情

reportProgress Angular 不适用于 Web API AspNet？

】reportProgressAngular不适用于WebAPIAspNet？【英文标题】：reportProgressAngulardoesn\'tworkwithWebAPIAspNet?【发布时间】：2021-11-0810:13:18【问题描述】：我正在编写任何文件的上传组件，我使用angular12和ASP.NETWebAPI，但报告进度不起作用。我想... 查看详情

getCurrentPosition 不适用于 angularjs

】getCurrentPosition不适用于angularjs【英文标题】：getCurrentPositiondoesnotworkwithangularjs【发布时间】：2016-01-1203:34:50【问题描述】：我试试这个（在页面加载时获取当前用户位置）angular.module(\'ionicApp\',[\'ionic\']).controller(\'MyCtrl\',function(... 查看详情

异步下载圆形进度条显示进度

圆形进度条参考链接即可：使用css3实现圆形进度条需求点击下载后遮罩层显示下载进度：1.圆形进度条参考以上链接，有点小瑕疵，可更改定位距离实现重合。 2.遮罩层：.lbOverlay{ display:none; position:fixed; left:0; ... 查看详情

SVG 进度条

】SVG进度条【英文标题】：SVGprogressbar【发布时间】：2016-11-2102:19:25【问题描述】：我有一个需求，我需要动态加载js文件并通过SVG图标显示加载文件的进度。SVG图标将充当进度条，从下到上线性填充颜色。这里是codepen<svgversio... 查看详情

ios制作个圆形进度条

参考技术A1.需要做个这样的圆形进度条 自定义弹窗view就不说了，主要是这个圆形进度view,底色是灰色然后有进度灰色被黑色覆盖或者说变成黑色首先我们自定一个view,加个uilabel做进度lbael@property(nonatomic,strong)UILabel*percentLabel;/... 查看详情

圆形进度条 Android

】圆形进度条Android【英文标题】：CircularProgressBarAndroid【发布时间】：2015-06-0320:06:35【问题描述】：我想创建一个分段的圆形进度条，其行为类似于倒数计时器，这样每个分段都有自己的时间限制。有一个iOS应用pTimer+，我想在An... 查看详情

带圆角的 Android 圆形进度条

】带圆角的Android圆形进度条【英文标题】：Androidcircularprogressbarwithroundedcorners【发布时间】：2016-08-0623:37:54【问题描述】：我正在尝试获得一个带有圆角的圆形进度条，如下所示。但到目前为止，我无法获得圆角，我能够获得圆... 查看详情

Ionic BarcodeScanner 不适用于 ios

】IonicBarcodeScanner不适用于ios【英文标题】：IonicBarcodeScannerdoesnotworkonios【发布时间】：2016-05-2818:40:23【问题描述】：我创建了一个ionic应用程序，它在android上运行良好。但是条码扫描器在ios中无法正常工作。我的代码；$cordovaBarc... 查看详情

googlechrome圆形进度条

Conmajia?2012UpdatedonFeb.21,2018GoogleChrome的圆形进度条。Demo功能显示百分比（0-100）。如果进度值达到100%，则将闪烁指定次数。属性BlinkCount，结束后闪烁几次。0为不闪烁，默认2.BlinkSpeed，闪烁速度，0-255，默认10.Image，中央图标SpokeCol... 查看详情