Angular [innerHTML] 与 document.getElementById().innerHTML [重复]答案

【问题标题】：Angular [innerHTML] vs document.getElementById().innerHTML [duplicate]Angular [innerHTML] 与 document.getElementById().innerHTML [重复]
【发布时间】：2017-08-21 20:45:00
【问题描述】：

我有生成随机符号 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;
       }
    }   
  }
}

忽略循环和仅持有最后一个元素的持有者 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

谢谢！

【问题讨论】：

我试过<div id="symbols1">{{holder}}</div>，它只是打印出纯文本，[innerHTML]='holder' 也一样。我明天试试innerHTML="{{holder}}"，到那时我也会设置一个 plunker

标签： angular svg

【解决方案1】：

您犯了一个简单的错误：您必须将 holder 放在双引号 (" ") 内。

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

这也应该适用于 imo：

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

【讨论】：

我在移动设备上，如果它在控制台中抛出任何错误，那么可能是关于清理（安全 html），或者在这里写下你收到的错误，如果有的话！
没有骨头，我明天会进行更深入的研究，但是 ' 和 " 之间的绑定有什么不同？我一直在交替使用两者
查看此答案以安全清理 html：stackoverflow.com/a/41089093/1791913