在 typescript、Angular 中使用動態 html 將 ngModel 添加到輸入

Question

我想在 html 表中動態添加一個td ，里面有一個input ，我希望輸入具有 ngModel 屬性，並且是這樣的：

<td><input type="number" name="Price" [(ngModel)]="Product.Price"></td>

我在我的 ts 中添加了td ，例如：

td = document.createElement('td');
input = document.createElement('input');
input.setAttribute('type', 'number');
input.setAttribute('name', 'Price');
td.appendChild(input);
tr.appendChild(td);

現在我的問題是，如何將 ngModel 添加到動態 td？

Answer 1

雙向綁定ngModel專為模板驅動的 forms 而不是動態 forms 設計，您可以在其中動態添加內容。

如果您已經可以動態訪問該元素，則可以向其添加keyUp事件。 因此，您可以訪問輸入的值。

<td><input type="number" name="Price" [(ngModel)]="Product.Price"></td>
I added the td in my ts, like:

td = document.createElement('td');
input = document.createElement('input');
input.setAttribute('type', 'number');
input.setAttribute('name', 'Price');
td.appendChild(input);
tr.appendChild(td);

input.addEventListener('keyup', function(event) {
      console.log(event);
})