我有生成随机符号svg的代码,但是当我尝试绑定该svg[innerHTML]
却没有结果时,但是当我绑定document.getElementById().innerHTML
SVG时,显示正常
holder : any
createSymbolIcon(): any {
//placeholder until get full list of icons
let symbolsSIDC = ['G*C*FS TP --*****', 'SUP*------*****', 'SNP*------*****']
var renderedContent = "";
for (var i = 1; i <= 10; i++) {
var sidc = symbolsSIDC[Math.floor(symbolsSIDC.length * Math.random())];
renderedContent = new ms.Symbol(sidc, { size: 30, infoFields: false }).asSVG();
if(angularBind){
this.holder = renderedContent
} else {
document.getElementById("symbols" + i).innerHTML = renderedContent;
}
}
}
}
忽略循环,而holder var只保留最后一个元素,这是HTML中的绑定外观
<div id="symbols1" [innerHTML]='holder'></div>
最后,renderedContent
输出类似于
"<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" width="35.4" height="38.4" viewBox="41 26 118 128"><path d="M 45,150 L 45,30,155,30,155,150" stroke-width="4" stroke="black" fill="rgb(170,255,170)" fill-opacity="1" ></path><path d="M45,50 l0,-20 110,0 0,20 z" stroke-width="4" stroke="none" fill="black" ></path></svg>"
知道是什么导致此svg标记与[innerHTML]值绑定时无法呈现吗?我宁愿不使用document.getID
谢谢!
您正在犯一个简单的错误:您必须在holder
内部加上双引号(“”)。
<div id="symbols1" [innerHTML]="holder"></div>
这也应该imo工作:
<div id="symbols1" innerHTML="{{holder}}"></div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句