Angular6 角度6显示动态html

有人能为我澄清一下原因吗：

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() {
  }

}

结果显示为：

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

作为我的ul>li输出

澄清：

我试图创建3组输入，每个输入都带有文本/复选框输入，但我得到的是[object]

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