我想在线性渐变停止偏移中使用绑定(bind) angular2 值,但它给我错误。有人能告诉我如何在线性渐变的停止偏移中绑定(bind) angular2 值,如下所示吗?
测试.component.ts
import {Component, EventEmitter, ViewEncapsulation, Input, OnInit} from '@angular/core';
@Component({
selector: 'test-comp',
templateUrl: 'test-component.html',
encapsulation: ViewEncapsulation.None
})
export class TestComponent implements OnInit {
@Input() name: string;
@Input() flexScore: number;
protected goodScore: number;
protected dangerScore: number;
protected isComplete: boolean = false;
ngOnInit() {
this.goodScore = this.flexScore;
this.dangerScore = 100 - this.goodScore;
console.log(this.goodScore + ' ' + this.dangerScore);
this.isComplete = true;
}
}
测试组件.html
<div class="individual-athlete-risk">
<span id="name">{{name}}</span>
<span id="score">{{flexScore}}</span>
</div>
<svg width="200" height="10" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="testGradient">
<stop attr.offset="{{goodScore}}%" stop-color="blue"/>
<stop attr.offset="{{dangerScore}}%" stop-color="red"/>
</linearGradient>
</defs>
<rect fill="url(/test#testGradient)" x="0" y="0" width="200" height="9"/>
</svg>
它给我错误。我想添加具有动态值的渐变线。请帮忙。
@Gaunter 我已经更新/编辑了您所说的代码,现在错误已删除,但根据 OnInit() 函数中确定的值,条形/渐变似乎仍然是常量。我检查了 OnInit 中的 goodScore 和 dangerScore 值,它们是正确的并且不统一。有什么想法吗?
最佳答案
我想这就是你想要的:
<stop [attr.offset]="goodScore" stop-color="blue"/>
<stop [attr.offset]="dangerScore" stop-color="red"/>
您需要 [attrname]="fieldName"
或 attrname="{{fieldName}}"
来获取 Angular2 绑定(bind)。
SVG 元素没有属性,因此您需要进行属性绑定(bind),因此需要额外的 attr.
前缀来绑定(bind)到 SVG 元素。
关于javascript - 在 SVG 线性渐变停止偏移中绑定(bind) Angular2 值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41073950/