Как генерировать динамические строки таблицы на основе ввода из текстового поля

Question

Я работаю над проблемой, в которой мне нужно создать динамические строки таблицы на основе ввода, введенного пользователем через текстовое поле.

Мой код .ts:

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

.html code:

<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 - число, указанное в поле ввода, после каждой секунды должна добавляться строка иэто значение должно получить print и третий столбец при умножении обоих, и строка таблицы должна продолжаться, пока не будет введено входное значение.

Пожалуйста, подскажите, что я делаю неправильно, и как я могу печатать динамические строки на основевход предоставлен.

Answer 1

printVal - это строковая переменная, поэтому при создании нового массива, например:

[].constructor(printVal)

, вы получите, например, [].constructor("3"), так что это массив с одним элементом.

Вы должны привести значение от ввода к числу:

this.printVal = +val;

Answer 2

Посмотрите на следующий код.Может быть, это даст вам идею для достижения вашей цели.

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);
  }
}

<div class="container col-lg-12">
	<input type="number" #data> &nbsp; 
  <button (click)="start(data.value)">Start</button>
  <br><br>
  <ng-container >
  <table>
    <tr>
      <th>Input</th>
      <th>Second</th>
      <th>Multiplication</th>
    </tr>
    
<tr *ngFor="let item of printVal; let i = index"> 
 <td>{{printVal.length}}</td>
  <td>{{i}}</td>
   <td>{{item*i}}</td>
</tr>
  </table>
    </ng-container>
</div>