Angular 2 中的动态下拉问题

Question

我正在尝试从 table td 中的动态下拉菜单 select selected 'option'，其中 tr 迭代了 18 次。将 ngModel 放在 'Select' 中会导致所有行使用相同的 selection！如何使每个独立使用 ngModel 将数据发送到 ts 文件？

HTML:

<tr class="row header" *ngFor = "let par of Course; let i=index" >
<td class="col">{{i +1}}</td>
<td class="col1">{{par.Index}}</td>
<td class="col">{{par.Par}}</td>
<td class="col2">{{getPoints(par)}}</td>
<td class="col">{{getShots(par)}}</td>
<td class="col3" ><select [(ngModel)]="sel" (change)="onChangeScore(sel)">
<option  *ngFor= "let s of items" >{{s}}</option></select></td>
</tr>

Answer 1

您正在迭代 X 个元素，但您对每个 par 使用相同的变量 sel。我建议您将选择分配给 par，这样您就可以轻松地从 Course 数组中获取它。为此，请替换为：

<select [(ngModel)]="sel" (change)="onChangeScore(sel)">

对此：

<select [(ngModel)]="par.sel" (change)="onChangeScore(par.sel)">

然后在您的 ts 文件中，您可以通过以下方式轻松访问它：

onChangeScore(selection) {
    console.log(selection);
}

很高兴我能提供帮助

Angular 2 中的动态下拉问题

Dynamic drop-down issues in Angular 2

angular2-template

angular