Question

我想将文本字段值添加到动态<tr>中。

new-betting.component.html

<input type="number" [formControl]="betOption3" class="form-control allownumericwithoutdecimal">

<tr *ngFor="let row of selectedOptions$ | async">
   <td>{{ row.code.value }}</td>
   <td>{{ row.desc.value }}</td>
   <td>{{ row.amount.value }}</td>
</tr>

<button type="button" class="btn btn-success btn-sm btn-round waves-effect waves-light m-1" id="addnewrecord" (click)="addRow()">Add Bet</button>

new-betting.components.ts

betOption = new FormControl();
betOption2 = new FormControl();
betOption3 = new FormControl();
options$ = new BehaviorSubject([{ id: 1, value: 'Mark Verndom' }, { id: 2, value: 'Jacob Brown' }, { id: 3, value: 'Steve Rogurs' }]);
options2$ = new BehaviorSubject([{ id: 1, value: 'CSN1' }, { id: 2, value: 'CIA5' }, { id: 3, value: 'CSI7' }]);

addRow() {
if (!this.betOption.value) {
    return;
}
if (!this.betOption2.value) {
  return;
}
const yourSelectedObject = this.options$.value.find(el => el.id === Number(this.betOption.value));
const yourSelectedObject2 = this.options2$.value.find(el2 => el2.id === Number(this.betOption2.value));
const yourSelectedObject3 = this.options2$.value.find(el3 => el3.id === Number(this.betOption3.value));
this.selectedOptions$.next([...this.selectedOptions$.value, {desc: yourSelectedObject, code: yourSelectedObject2, amount: yourSelectedObject3}]);

}

以前，我已经向该动态<select>添加了两个<tr>值。他们工作得很好。但是很难将此文本字段添加到<tr>中。我对Angular较新鲜。帮我解决这个问题。

Answer 1

在输入上设置模板参考变量，并在单击按钮时传递其值。在 addRow（betOption3typeValue）{} 函数中捕获值。

<input #betOption3type="number" [formControl]="betOption3" class="form-control allownumericwithoutdecimal">

<button type="button" class="btn btn-success btn-sm btn-round waves-effect waves-light m-1" id="addnewrecord" (click)="addRow(betOption3.value)">Add Bet</button>

Answer 2

您可以尝试PrimeNg桌

OR

<tr *ngFor="let row of selectedOptions$ | async">
  <td><input [(NgModel)]="row.code.value" /></td>
  <td><input [(NgModel)]="row.code.value" /></td>
  <td><input [(NgModel)]="row.amount.value" /></td>

</tr>

Answer 3

使用 ngModel 通过两种方式进行绑定的另一种方法。 NgModel是“ FormsModule”角形的一部分，必须导入到您的模块中

<input [(ngModel)]="betOption3type" type="number" [formControl]="betOption3" class="form-control allownumericwithoutdecimal">

在类中定义betOption3type变量。

betOption3type = "";

此变量保存输入值，可以在addRow（）中使用。

this.selectedOptions$.next([...this.selectedOptions$.value, {desc: yourSelectedObject, code: yourSelectedObject2, amount: this.betOption3type}]);

将输入值添加到Angular中的动态<tr>

3 个答案: