Javascript 我需要将html标记传递给变量，它应该显示html元素

我需要在表格标题中输入元素，标题是从ts文件传递的。我存储了string中的标记，并将其存储在变量和padding to header中，并在header中显示[HTMLInputElemnt]

我在那个地方需要投入，如何实现？？ 提前谢谢

声明：

export interface Custom {
  title?: string;
  field?: string;
  default?: 0;
  type?: string;
}

类型脚本函数

     ngOnInit() {
    this.inputHead = this.htmlToElement('<input value="3">');
    console.log(this.inputHead,"op")

    this._config = {
      name: "Custom",
      properties: this._tableHeader
    };


    this._tableHeader = [
      { title: 'Test Name', field: 'testname', type: 'text', default: 0 },
      { title: 'Initial', field: 'initial', type: 'any', default: 0 },
      { title: this.inputHead, field: 'check', type: 'any', default: 0 },
      { title: this.inputHead, field: 'check', type: 'any', default: 0 }
    ];


    this.testData = [
      { testname: 'Color Test' },
      { testname: 'Humidity Test' },
      { testname: 'Weight Test' },
      { testname: 'Composition Test' },
    ]
    this.cdRef.markForCheck();
  }
   htmlToElement(html:any) {
    var template = document.createElement('template');
    html = html.trim(); // Never return a text node of whitespace as the result
    template.innerHTML = html;
    console.log(template.content.firstChild ,);
    return template.content.firstChild;   
}
}

ngOnInit（）{
this.inputHead=this.htmlToElement（“”）；
console.log（this.inputHead，“op”）
这是。_config={
名称：“海关”，
属性：此。\u tableHeader
};
此.\u tableHeader=[
{title:'Test Name'，field:'testname'，type:'text'，默认值：0}，
{title:'Initial'，field:'Initial'，type:'any'，默认值：0}，
{title:this.inputHead，字段：'check'，键入：'any'，默认值：0}，
{title:this.inputHead，字段：'check'，键入：'any'，默认值：0}
];
this.testData=[
{testname:'颜色测试'}，
{testname:'湿度测试'}，
{testname:'重量测试'}，
{testname:'组合测试'}，
]
this.cdRef.markForCheck（）；
}
htmlToElement（html:any）{
var template=document.createElement（'template'）；
html=html.trim（）；//结果永远不返回空白文本节点
template.innerHTML=html；
log（template.content.firstChild，）；
返回template.content.firstChild；
}
}

输出

---

不确定要实现什么，但您可以返回

模板

，而不是

模板.content.firstChild

，然后使用属性绑定而不是字符串插值，如下所示：

<div [innerHTML]="inputHead.innerHTML | sanitizeHtml"></div>

方法

htmlotement

返回类型为

HTMLTemplateElement

的对象，您需要绑定到其

innerHTML

属性。另外，当Angular将该值识别为不安全值时，请清理该值。 以下是最新的Stackblitz：

---

您能创建一个Stackblitz示例吗@Rajat我并没有展示im使用的是什么，因为im也使用其他组件，但结果和你们的例子一样，我可以从数组中传递不同的增量值吗？你们是什么意思？在我的项目中，我在点击按钮时将数据从另一个组件复制到数组中，所以对于点击按钮，它需要对输入进行编码@拉贾特：是的，这应该是可行的。试着使用*ngnight@Rajat TY