如何在打字稿中动态创建输入文字

Question

我知道在javascript中，我可以按以下方式创建元素。

     var input = document.createElement("input");
     input.type = "text";
     input.className = "css-class-name"; // set the CSS class
     document.body.appendChild(input);

在我的角度应用程序中，我从ngOnInit的ngOnInit中的http服务获取了一些数组值。

我有一个方案可以根据数组值动态创建输入类型文本。 如果数组值为5，则应创建五个输入类型。

打字稿可以吗？ 还是我也应该在打字稿中使用以上代码？

解决这种情况的最佳方法是什么？

Answer 1

创建一捆表单控件。 Stackblitz

inputs: FormControl[] = [];

ngOnInit() {
  this.myService.getNumberOfInputs().subscribe(count => {
    for (let i = 0; i < count; i++) {
      this.inputs.push(new FormControl(''));
    }
  });
}

<input type="text" *ngFor="let input of inputs" [formControl]="input">

Answer 2

使用*ngFor （这是一个Angular指令）来遍历数组的元素。 如果在模型中您有public array = [1, 2, 3, 4] ，在模板中您有

<ul>
  <li *ngFor="let element of array">{{ element }}</li>
</ul>

这将打印以下DOM：

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

因此，对于您的问题，要创建输入，只需将输入放入循环中即可。

<div *ngFor="let element of array">
  <input type="text" class="css-class-name">
</div>

顺便说一下，这是Angular模板中的基本操作。 我敦促您从官方站点阅读Angular的官方介绍，以了解Angular可以做什么。

Answer 3

零件：

public inputControlsArr : Array<any> = [];

this.service.getValues().subscribe((values)=>{
   this.inputControlsArr = values;
});

模板：

<div *ngFor="let input of inputControlsArr; let i = index;">
    <input type="text" [(ngModel)}="inputControlsArr[i]"/>
</div>