代码之家 › 专栏 › 技术社区 › UI_Dev

如何在typescript中动态创建输入类型文本

typescript angular javascript

1

UI_Dev · 技术社区 · 8 年前

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

ngOnInit 的应用组件.ts.

我有一个基于数组值动态创建输入类型文本的场景。如果数组值为5,则应创建5个输入类型。

处理这种情况的最佳方法是什么?

3 回复 | 直到 8 年前

1

2

user4676340 user4676340 8 年前

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">

2

1

Lazar LjubenoviÄ 8 年前

*ngFor ,这是一个角度指令,用于循环数组的元素。如果你的模型里有 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>

顺便说一下,这是角度模板中的基本操作。我劝你 read the official introduction to Angular 从官方网站上得到一个可以做什么的把握。

3

1

Suresh Kumar Ariya 8 年前

组成部分:

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>