角[innerHTML] vs document.getElementById().innerHTML

Question

我有生成随机符号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只保存最后一个元素，以下是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

谢谢!

Answer 1

您做的是一个简单的错误:您必须将holder放在双引号(“")中。

<div id="symbols1" [innerHTML]="holder"></div>

这也应适用于海事组织：

<div id="symbols1" innerHTML="{{holder}}"></div>