Question

当用户点击指定选项时，我希望Angular执行“onEditClick”函数，这是我的代码：

<select class="form-control">
  <option *ngFor="let skill of skills" (click)="onEditClick(skill)" >{{ skill.name }}</option>
</select>

当我点击任何选项时，没有任何反应。

我尝试使用表而不是选择它并且它有效：

<tbody *ngFor="let skill of skills">
  <td> {{ skill.name }} </td>
<td><button class="btn btn-outline-success" height="20" width="20" (click)="onEditClick(skill)">Edit</button></td>
</tbody>

如何选择一个？

Answer 1

选择单击事件无效选项，您应该使用更改事件

opencv

然后在你的组件中用那个

做一些事情

<select class="form-control" (change)="onEditClick($event.target.value)"> <option *ngFor="let skill of skills"> {{ skill.name }} </option> </select>

您还可以使用onEditClick(skill: any) { console.log('skill name', skill) }

将技能对象的其他参数作为id等值传递

[value]="skill.id"

但是如果你想获得完整的技能对象，你可以用[（ngModel）]和（改变）做到这一点，如下所示：

<option *ngFor="let skill of skills" [value]="skill.id">

而不是你的组件：

<select class="form-control" [(ngModel)]="selectedSkill" (change)="getSelectedSkill()"> <option *ngFor="let skill of skills" [ngValue]="skill"> {{ skill.name }} </option> </select>

selectedSkill: any

在选择（角度4）上添加操作选项

1 个答案: