SVGリニアグラジエント停止オフセットの角度2値をバインドしますか？

Question

私は線形勾配の停止オフセットでbind angular2値を使用したいが、それはエラーを出す。誰かが、以下に示すように、線形勾配の停止オフセットでangular2値をどのようにバインドすることができますか？

test.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; 
} 
} 

私にエラーを与えてテストcomponent.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の値をチェックしていますが、それらは正確で一様ではありません。何か案が？

Answer 1

私はこれが何をしたいと思い：

 <stop [attr.offset]="goodScore" stop-color="blue"/> 
     <stop [attr.offset]="dangerScore" stop-color="red"/> 

あなたはAngular2バインディング取得する[attrname]="fieldName"またはattrname="{{fieldName}}"のいずれかが必要です。
SVG要素にはプロパティがないため、属性バインディングを行う必要があります。したがって、SVG要素へのバインディングには接頭辞attr.が追加されます。