Angular

Question

我正在尝试在 Angular 10 中制作一个可重复使用的组件。这是我的 html

<form [formGroup]="form" (ngSubmit)="onSubmit()">
    <div *ngFor="let element of elements">
       {{ createHtmlElement(element) }}
    </div>
</form>

调用的函数是

createHtmlElement(element): HTMLElement {
    if (element.input) {
      const input = document.createElement("input")
      input.type = element.type;
      input.id = element.id;
      input.className = 'form-control';
      input['formControlName'] = element.id;
      return input;
    }
}

但我在屏幕上看到的是这个

[object HTMLInputElement]

是否有 Angular 功能可以让我正确地执行此操作？

Answer 1

Angular 具有允许属性在模板上绑定的功能。

您可以像这样在模板上绑定属性：

<form [formGroup]="form" (ngSubmit)="onSubmit()">
    <div *ngFor="let element of elements">
       <input [type]="element.type" [id]="element.id" class="form-control" [formControlName]="element.id" />
    </div>

Angular - 使用 ngFor 中的函数创建 html 元素无法正确显示

Angular - creating html elements with a function inside ngFor are not displayed correctly

ngfor