Question

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

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

在我的有角度的应用程序中，我从app.component.ts的ngOnInit中的http服务获得了一些数组值。

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

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

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

Answer 1

创建一组表单控件。 Stackblitz

Expander

public bool IsExpanded
{
    get => _isExpanded;
    set
    {
        _isExpanded = value;
        OnPropertyChanged(nameof(IsExpanded));
    }
}

public Match Match
{
    get => _match;
    set
    {
       _match = value;
       switch (value)
       {
           case Exact:
           case None:
               IsExpanded = true;
               break;
           case Multiple:
               IsExpanded = false;
               break;
       }
    }
}

Answer 2

使用second.df$Description <- first.df$Description second.df$Location <- first.df$Location（这是Angular指令）在数组元素上循环。如果您的模型中有*ngFor，而您的模板中有

public array = [1, 2, 3, 4]

这将打印以下DOM：

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

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

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

顺便说一句，这是Angular模板中的基本操作。我敦促您从官方网站read the official introduction to 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>

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

3 个答案: