1
ng-repeatを使用してSVG Linesを描画していて、各行の翻訳を変更したいと考えています。しかし、ng-attr-styleを使用すると、スタイルを適用することができません。Angular2 - ng形式のSVG
私-component.js:
import {Component} from 'angular2/core';
@Component({
selector: 'my-component',
templateUrl: 'my-component.html'
})
export class MyComponent{
lines: [
{ translateX: 0.0, translateY: 0.0, weight: 0.40, x1: 86.69, y1: 1, x2: 98.91, y2: 1 },
{ translateX: 0.0, translateY: 0.0, weight: 0.40, x1: 85.31, y1: 9.67, x2: 98.23, y2: 9.67 }
]
}
私成分-HTML:これは私がDOM内の要素を検査する際に見たものである
<svg id="lines" viewBox="0 0 320.6 542.59">
<line *ngFor="let line of lines" ng-attr-style="{'transform': 'translate('+line.translateX+'px, ' + line.translateY+'px)'}" class="line" [attr.x1]="line.x1" [attr.y1]="line.y1" [attr.x2]="line.x2" [attr.y2]="line.y2"/>
</svg>
:
<line _ngcontent-ssx-9="" class="line" ng-attr-style="{'transform': 'translate('+line.translateX+'px, ' + line.translateY+'px)'}" x1="189.1" y1="226.41" x2="212.06" y2="226.41"></line>
ありがとうございました。しかし、コンソールに次のメッセージが表示されています。警告:安全でないスタイルの値を消毒する – IIMaxII