时间戳

首页 > 解决方案 > 如何根据文本框的输入生成表格的动态行

angular - 如何根据文本框的输入生成表格的动态行

问题描述

我正在解决一个问题，我需要根据用户通过文本框给出的输入生成表的动态行。

我的 .ts 代码：

start(val){
    this.printVal=val;
    console.log('Value of start is',this.printVal);
    return new Array(val);
  }

.html 代码：

<div class="container col-lg-12">
  <input type="number" #data> &nbsp; 
  <button (click)="start(data.value)">Start</button>
  <br><br>
  <table>
    <ng-container >
<tr *ngFor="let item of [].constructor(printVal); let i = index"> //If instead of printVal, I give a number then it prints the desired output

  <td>{{i}}</td>

</tr>
    </ng-container>
  </table>
</div>

实际上我需要创建一个这样的表

 | Input|sec|Multipilcation
 |------|---|------------------------------
 |10    |1  |10
 |10    |2  |20
 |10    |3  |30
 |10    |4  |40
 .
 .
 .
 10    |10  |100

其中 10 是通过输入框提供的数字，每秒后应添加一行，其值应打印，第三列乘以两者，表格行应继续，直到提供的输入值。

请告诉我我做错了什么以及如何根据提供的输入打印动态行。

标签： angularangular6

解决方案

printVal是一个字符串变量，所以当你像这样创建一个新数组时：

[].constructor(printVal)

例如[].constructor("3")，您将得到一个包含一个元素的数组。

您应该将值从输入转换为数字：

this.printVal = +val;

推荐阅读