我需要根据计算的百分比做一个进度弧,我已经创建了一个自定义指令来访问来自用户的svg属性,当在模板中更新时,我得到了以下错误:
不能绑定到'cx',因为它不是已知的本机属性
不能绑定到'cy',因为它不是已知的本机属性
等等。
progress-arc([size]="200", [strokeWidth]="20", [stroke]="red", [complete]="0.8")
import {Component,Input,AfterViewInit} from '@angular/core';
@Component({
selector:'progress-arc',
template:`
<svg height="100" width="100">
<circle fill="white"
cx="{{parsedSize/2}}"
cy="{{parsedSize/2}}"
r="{{radius}}"
stroke="{{stroke}}"
stroke-width="{{strokeWidthCapped}}"
stroke-dasharray="{{circumference}}"
stroke-dashoffset="{{(1 - parsedComplete) * circumference}}"/>
</svg>`,
providers: [],
directives: []
})
export class ProgressArc implements AfterViewInit {
@Input('size') size:string;
@Input('strokeWidth') strokeWidth:string;
@Input('stroke') stroke:string;
@Input('complete') complete:string;
parsedStrokeWidth:number;
parsedSize:number;
parsedComplete:number;
strokeWidthCapped:number;
radius:number;
circumference:number;
ngAfterViewInit() {
this.parsedSize = parseFloat(this.size);
this.parsedStrokeWidth = parseFloat(this.strokeWidth);
this.parsedComplete = parseFloat(this.complete);
this.strokeWidthCapped = Math.min(this.parsedStrokeWidth, this.parsedSize / 2 - 1);
this.radius = Math.max((this.parsedSize - this.strokeWidthCapped) / 2 - 1, 0);
this.circumference = 2 * Math.PI * this.radius;
}
}
为了绑定到Angular中的SVG元素属性,必须在它们前缀attr
:
对于您的圈子,这将是:
<svg height="100" width="100">
<circle fill="white"
[attr.cx]="parsedSize/2"
[attr.cy]="parsedSize/2"
[attr.r]="radius"
[attr.stroke]="stroke"
[attr.stroke-width]="strokeWidthCapped"
[attr.stroke-dasharray]="circumference"
[attr.stroke-dashoffset]="(1 - parsedComplete) * circumference"/>
</svg>
我不完全确定它应该是[attr.stroke-width]
还是[attr.strokewidth]
,但试试看。
完整代码为: app.module为: 怎么了,为什么对我不起作用?
是的,这可能是第一百次有人遇到这个问题,但没有解决办法对我有效。。。 我使用角2.0.0 rc和什么都不会工作,我想我错过了一些东西,但我不知道是什么 这是我的文件,它们都可以正确传输,是的,我尝试使用不推荐的路由,是的,我根据文档做了,两者都不起作用。 app.component.ts 主要的ts 指数html 其余的文件几乎都是教程中的复制粘贴,所以我不会用更多的代码来垃圾邮件。。。 更新,我
我必须动态地创建一个复选框列表 无法绑定到“for”,因为它不是已知的本机属性 angular2 新错误消息 未处理的promise拒绝:模板分析错误:无法绑定到“for”,因为它不是“label”的已知属性。 这是我的plnkr显示错误:http://plnkr.co/edit/aAQfWvHc7h7IBuYzpItO?p=preview 我的代码中哪里出错了?
我试图在这里遵循基本的Angular 2教程: https://angular.io/docs/js/latest/guide/displaying-data.html 我可以让angular应用程序加载并显示我的名字,代码如下: 但是,当我尝试添加字符串数组并尝试使用ng for显示它们时,它会抛出以下错误: 以下是代码: 我错过了什么?
我已经将我的应用程序从Angular 2升级到Angular 6版本。ng build--prod正在成功构建应用程序。我能够登录到我的应用程序和50%的功能是完美的工作,在一些选项不工作和抛出下面的异常:
我做错了什么? 错误是