Angular 2如何在选项内添加点击事件?

Posted

技术标签:

【中文标题】Angular 2如何在选项内添加点击事件?【英文标题】:Angular 2 how can i add click event inside option? 【发布时间】:2017-07-03 15:41:42 【问题描述】:

这是我的html,当我点击选项"new-item"它会打开输入类型框,然后我输入要添加到选择选项的值

<form (submit)="addItem()">
    <input type="text" [(ngModel)]="add.name" name="name">
    <input type="text" [(ngModel)]="add.price" name="price">
    <input type="text" [(ngModel)]="add.description" name="description">
    <select [(ngModel)]="add.type" name="room-type">
        <option [value]="c">Select</option>
        <option>BreakFast</option>
        <option>Lunch</option>
        <option>Dinner</option>
        <option><button (click)="addSelect()">Add-item</button></option>
        <input *ngIf='edited' type="text" >
   </select>

我的打字稿是,

addSelect() 
        this.edited = true;

constructor() 
    this.edited = false;

【问题讨论】:

为什么需要这样的活动? click 无论如何都会使它被选中,为什么不使用 ng-change 呢。 我想从输出中手动添加选择选项。我怎样才能获得详细信息 但我不需要这个。我需要在单击添加项目选项时新的输入框要打开。在这个输入框中我输入值,这个值可以存储到选择选项 【参考方案1】:

您不能将此类事件添加到 &lt;option&gt;

您可以看到该事件并没有在所有浏览器中触发(它在唯一的浏览器是

$("#trig").click((event) =&gt; console.log(event));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option>default</option>
  <option id="trig">trigger</option>
</select>

代码不会向下传播任何点击事件。因此,您尝试在选项内分配的任何点击事件都将不起作用。最好的办法是查看在onChange() 回调中收到的值,然后打开另一个允许用户输入数据的组件。您甚至可以使用window.prompt() 来获取此类数据。

您可以改为这样做:

<select (change)="onChange($event.target.value)">

onChange(val) 
    console.log(val);
    this.edited = false;

有关实施此方法的更多信息,请参阅:How can I get new selection in "select" in Angular 2?

【讨论】:

但我不需要这个。我需要在单击添加项目选项时新的输入框要打开。在这个输入框中我输入值,这个值可以存储到选择选项 &lt;option&gt; 标记不会向下传播任何点击事件。因此,您尝试在选项内分配的任何点击事件都将不起作用。正如那个 jquery 演示所证明的那样。您最好的选择是查看您在 onChange 函数中收到的值,然后如果它是您想要的值,则打开另一个允许用户输入数据的组件。你甚至可以使用window.prompt @chan 我知道这是一个令人失望的结论,但是在去年年底,我花了一周的时间在工作中试图在一个项目中获得完全相同的功能。我最终使用了上述方法。很高兴它解决了您的问题。

以上是关于Angular 2如何在选项内添加点击事件?的主要内容,如果未能解决你的问题,请参考以下文章

BaseQuickAdapter和BaseViewHolder使用 RecyclerView点击事件 RecyclerView添加子view点击事件 RecyclerView添加子view点击事

如何在Angular中按顺序处理2个点击事件

点击事件在运行时添加 Angular 组件的最佳方法

Angular 6 Datatables为按钮添加点击事件

js如何给按钮添加点击事件

Angular2如何在不点击的情况下触发(点击)事件