угловой дисплей 6 динамический HTML

Question

Кто-нибудь, пожалуйста, объясните мне, почему:

import { Component, OnInit } from '@angular/core';
import { InputGroup } from "../input-group";

@Component({
  selector: 'app-input-group',
  template: `<ul>
     <li *ngFor="let input of inputs;"> 
       <div innerHtml={{input.name}}></div>{{ input.name }},{{input.check}}
     </li>
   </ul>
`,
  // template: '<div ng-bind-html="inputs"></div>'
})
export class InputGroupComponent implements OnInit {
  public Create_Element(type: string, name: string): HTMLInputElement {
    var element = document.createElement("input");
    element.setAttribute("type", type);
    element.setAttribute("name", name);
    return element;
  }


  public inputs: InputGroup[] = [
    {
      name: this.Create_Element("text", "food1"),
      check: this.Create_Element("checkbox", "food1Check")
    },
    {
      name: this.Create_Element("text", "food2"),
      check: this.Create_Element("checkbox", "food2Check")
    },
    {
      name: this.Create_Element("text", "food3"),
      check: this.Create_Element("checkbox", "food3Check")
    },
  ];

  constructor() { }

  ngOnInit() {
  }

}

, где интерфейс "InputGroup":

export interface InputGroup {
 name: HTMLInputElement,
 check: HTMLInputElement
}

приводит к отображению:

[object HTMLInputElement]
[object HTMLInputElement],[object HTMLInputElement]
[object HTMLInputElement]
[object HTMLInputElement],[object HTMLInputElement]
[object HTMLInputElement]
[object HTMLInputElement],[object HTMLInputElement]

как мой ul> li ngfor вывод.

Чтобы уточнить:

Я пытаюсь создать 3 группы входов с вводом текста / флажка, но вместо этого я получаю [объект объекта].