Angular 2 中的动态下拉问题答案

【问题标题】：Dynamic drop-down issues in Angular 2Angular 2 中的动态下拉问题
【发布时间】：2018-03-18 10:36:20
【问题描述】：

我正在尝试从 td 表中的动态下拉列表中选择选定的“选项”，其中 tr 迭代 18 次。将 ngModel 放在“选择”中会导致所有行使用相同的选择！如何让每个独立使用 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>

【问题讨论】：

您正在迭代 X 元素，但您对每个 par 使用相同的变量 sel。我建议您将选择分配给par，以便您可以轻松地从Course 数组中获取它。为此，请将sel 替换为par.sel。我希望它会工作
感谢您的快速响应！我希望快到了。将选择传递给 ts 文件只是“this.par.sel”的一个例子吗？（对不起，我是 Ionic 2 的新手。onChangeScore(par.sel) {console.log(this.par.sel); }
要将选择传递给 ts 文件，您还需要更改 onChangeScore(par.sel)。然后在您的 ts 文件中仅 onChangeScore(selection) {console.log(selection); }
塞巴斯蒂安，非常感谢！我花了几个小时在这上面。非常感谢
我将其发布为答案。考虑接受它，以便其他人可能在类似情况下使用它:)

标签： angular angular2-template

【解决方案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);
}

很高兴我能帮上忙

【讨论】：