Мне нужно передать тег html в переменную, и он должен отображать элемент html

Question

Мне нужно ввести элемент в заголовок таблицы, заголовки передаются из файла ts. Я сохранил тег из строки и сохранил переменную и отступ до заголовка, и в заголовке показывается [HTMLInputElemnt].

Мне нужны входные данные в этом месте. Как этого добиться? Заранее спасибо.

Объявление:

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

Функции TypeScript

     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;   
}
}

Вывод

Answer 1

Не уверен, что вы пытаетесь достичь, но вы можете просто вернуть template вместо template.content.firstChild и затем использовать привязку свойства вместо интерполяции строк следующим образом:

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

Метод htmlToElement возвращает объект типа HTMLTemplateElement, и вам необходимо привязать его к свойству innerHTML. Кроме того, очистите значение, так как Angular распознает его как небезопасное значение. Вот обновленный Stackblitz: https://stackblitz.com/edit/angular-n2v9ro