angular6 - angular 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>lingfor 输出。

澄清：

我正在尝试创建 3 组输入，每组都带有文本/复选框输入，但我得到了 [object object]。

标签： angular6