Как генерировать динамические строки таблицы на основе ввода из текстового поля
Я работаю над проблемой, когда мне нужно генерировать динамические строки таблицы на основе ввода, введенного пользователем через текстовое поле.
Мой .ts-код:
start(val){
this.printVal=val;
console.info('Value of start is',this.printVal);
return new Array(val);
}
.html-код:
<div class = "container col-lg-12">
<input type = "number" #data>
<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 - это число, указанное в поле ввода, после каждой секунды строка должна добавляться, и ее значение должно быть напечатано, а третий столбец должен быть умножен на оба, и строка таблицы должна продолжаться до предоставленного входного значения.
Пожалуйста, предложите мне, что я делаю неправильно и как я могу печатать динамические строки на основе предоставленного ввода.
потому что мне нужно перебирать числа, я нашел это решение в сети
Я получаю число из поля ввода, и мне нужно выполнить итерацию до предоставленного числа, и мне нужно создать количество строк на основе предоставленного ввода.
не используйте printVal, используйте data.value (ссылочная переменная, которую вы используете при вводе)
я тоже пробовал, тоже не работает
Первая проблема: вы используете синтаксис, который не знаете и не понимаете. Во-вторых, вы ничему не приписываете свою ценность. Третья проблема, у вас нет постоянства данных. Извините, но, похоже, вы даже не пытались, вы просто скопировали и вставили какой-то случайный код, чтобы создать вопрос, и вы ожидаете, что мы сделаем это за вас... Вы открывали документацию ?
Привет. Пожалуйста, взгляните на этот пример: stackblitz.com/edit/…
эй, спасибо за указатель, я понял, что я делал неправильно .. спасибо :)
@trichetriche может быть, я неправильно задал вопрос, я не понял, как повторить цикл по числу. Для этого я попробовал несколько решений. И решение, которое я упомянул в своем вопросе, работало для меня, когда я даю ему число в качестве входных данных. Но, да, я не вникал в глубину его синтаксиса, может быть поэтому он произвел на вас неправильное впечатление. Я позабочусь об этом в будущем .. спасибо
Ответы 2
printVal — это строковая переменная, поэтому, когда вы создаете новый массив следующим образом:
[].constructor(printVal)
вы получите, например, [].constructor("3"), так что это массив с одним элементом.
Вы должны перевести значение из ввода в число:
this.printVal = +val;
Большое спасибо, что указали, что я делаю не так. С утра я работал над этим. Еще раз спасибо :)
Взгляните на следующий код. Возможно, это даст вам идею для достижения вашей цели.
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.info('Value of start is',this.printVal);
}
}<div class = "container col-lg-12">
<input type = "number" #data>
<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>
*ngFor = "let item of [].constructor(printVal); let i = index"Почему?