Question

我正在处理一个问题，我需要根据用户通过文本框提供的输入来生成表的动态行。

我的.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是通过输入框提供的数字，每秒钟应加一行，其值应打印并乘以两者的第三列，表行应继续直到提供输入值。

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

Answer 1

printVal是一个字符串变量，因此在创建像这样的新数组时：

[].constructor(printVal)

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

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

this.printVal = +val;

Answer 2

看看下面的代码。也许它将给您一个实现目标的想法。

CompanyId  ProductBought   1   2   3   4
3          17              12  5   0   5

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent  { 
  printVal=[0,3,5,6,7];
  
  start(val){
    this.printVal.push=val;
    console.log('Value of start is',this.printVal);
  }
}

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

2 个答案: