Angular 尝试将选定值从select传递到函数，在数组中n次

我试图创建一个动态表，用户可以在其中选择行的数量。每行有2个下拉列表，其中1-10个可供选择。每次用户从下拉列表中选择一个数字时，我都希望它传递给TS文件中的一个函数来完成任务。我遇到的问题是，我试图使用ngModel将数据传递回TS文件。当我这样做时，在动态表中创建的每个下拉列表显然都会将自己设置为该值。在不需要双向绑定的情况下，将值传递回TS文件的最佳方法是什么

我的HTML：

<div class="table-responsive">
 <table class="table">
<thead class="thead-light">
  <tr>
    <th style="text-align:center">{{blueFighter}}</th>
    <th style="text-align:center">Round</th>
    <th style="text-align:center">{{redFighter}}</th>
  </tr>
</thead>
<tbody class="tablerows">
  <tr *ngFor="let round of rounds; index as i">
    <td id="{{'redScore'+i}}" align="center">
      <ng-select class="form-group"
                 style="width:50%"
                 [(ngModel)]="inputValueRed"
                 [items]="score"
                 (change)="updateRedScore($event, i, inputValueRed )"></ng-select>
    </td>
    <td align="center">{{i + 1}}</td>
    <td id="{{'blueScore'+i}}" align="center">
      <ng-select class="form-group"
                 style="width:50%"
                 [(ngModel)]="inputValueBlue"
                 [items]="score"
                 (change)="updateBlueScore($event, i, inputValueBlue)"></ng-select>
    </td>
  </tr>
  <tr style="font-weight:bold">
    <td>{{redScoreSum}}</td>
    <td align="center">FINAL SCORE</td>
    <td>{{blueScoreSum}}</td>
  </tr>
</tbody>

---

HTML缺少一部分，但该部分工作正常。

您不需要将select绑定到模型。 试一试

因此，只需给ng选择一个前面有的名称，添加ngModel指令并将其值作为参数传递。

您应该使用FormArray类被动设计。以下是伪代码：

ngOnInit() {
    this.myForm = new FormGroup(
      {
         'rounds':new FormArray([]);
      }
    }

可以使用如下方法添加新行：

  addRound() {
    const control = new FormControl(null, Validators.required);
    (<FormArray>this.myForm.get('rounds')).push(control);
  }

模板文件：

... 
<tr *ngFor="let round of myForm.get('rounds').controls; index as i">
...
<ng-select [formControlName]="i" >
...

---

当我尝试这样做时，我得到一个无法读取未定义的属性“value”。name属性是否可以重复？由于该表重复n次，因此将有多个具有该名称的元素。Ok。我想这没问题。尝试删除select并将select=ngModel name=select-{{i}}ngModel添加到您的select中。更新了我的答案。似乎有许多方面您仍然不知道。继续学习.tnx

  addRound() {
    const control = new FormControl(null, Validators.required);
    (<FormArray>this.myForm.get('rounds')).push(control);
  }

... 
<tr *ngFor="let round of myForm.get('rounds').controls; index as i">
...
<ng-select [formControlName]="i" >
...