Question

实际上我想做的是，有两个下拉列表和一个文本字段。我想从下拉列表中选择值，然后在文本字段中键入数字，然后单击按钮，将这三个值（两个下拉值和文本字段值）添加到动态<tr>中。现在，添加了两个下拉列表值，但未添加文本字段值。

Page.component.html

       <div class="card-body">
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <label class="input-group-text" for="inputGroupSelect02"><small>Options</small></label>
            </div>
            <select class="custom-select" id="inputGroupSelect01code" [formControl]="betOption2">
              <option selected>Game Code</option>
              <option [value]="option2.id" *ngFor="let option2 of options2$ | async">{{ option2.value }}</option>
            </select>
          </div>
          <hr />
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <label class="input-group-text" for="inputGroupSelect02"><small>Options</small></label>
            </div>
            <select class="custom-select" id="inputGroupSelect01dscr" [formControl]="betOption">
              <option selected>Description</option>
              <option [value]="option.id" *ngFor="let option of options$ | async">{{ option.value }}</option>
            </select>
          </div>
          <hr />
          <div class="input-group">
            <div class="input-group-prepend">
              <span class="input-group-text"><small>LKR. </small></span>
            </div>
            <input type="number" [(ngModel)]="betOption3"class="form-control allownumericwithoutdecimal" style="text-align:right;">
            <div class="input-group-append">
              <span class="input-group-text"><small>.00</small></span>
            </div>
          </div>
          <hr />
          <div class="" style="float: right;">
            <button type="button" class="btn btn-success btn-sm btn-round waves-effect waves-light m-1" id="addnewrecord" (click)="addRow()">Add Bet</button>
            <button type="reset" class="btn btn-warning btn-sm btn-round waves-effect waves-light m-1">Reset</button>
          </div>

        </div>

page.component.ts

export class NewBettingComponent implements OnInit {
betOption = new FormControl();
betOption2 = new FormControl();
betOption3 = {value:''};
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' }]);

selectedOptions$ = new BehaviorSubject([]);
constructor() { }

ngOnInit(){
}

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));
  this.selectedOptions$.next([...this.selectedOptions$.value, {desc: yourSelectedObject, code: yourSelectedObject2, amount: this.betOption3]);

}
}

Answer 1

要使代码正常工作，您只需从.value中删除amount: this.betOption3.value。这是因为应用于输入的ngModel直接返回其值。

使用Angular 8将下拉列表值和文本字段值添加到动态<tr>

1 个答案: