Question

我正在尝试创建2个按钮，打开电源并关闭电源，这些按钮具有针对其受尊重状态的点击事件。我把它们作为单选按钮，但是我想让它们在没有提交按钮的情况下提交，就像一个开关。因此，我决定将它们作为伪表单，并为每个表单添加单击侦听器以释放事件数据。

我通过记录点击来测试这一点，当我点击时，控制台会记录2次点击，尽管点击一次。

组件摘要

onClick(data: any) {
        console.log('click');
}

html代码段

<div class="btn-group" data-toggle="buttons">
                <label
                    class="power-toggle on btn btn-lg btn-success"
                    (click)="onClick($event)"
                >
                    <input type="radio" name="power" value="power-on" autocomplete="off">
                        ON
                </label>
                <label
                    class="power-toggle off btn btn-lg btn-danger active"
                    (click)="onClick('off')"    
                >
                    <input type="radio" name="power" value="power-off" autocomplete="off" checked>
                        OFF
                </label>
            </div>

为什么会这样？我该怎么办呢？有没有一种方法可以在没有提交按钮或将按钮变成提交按钮的情况下按原样提交无线电值？

Answer 1

您需要将click函数绑定到输入而不是标签。

请在此处找到plunker示例：https://plnkr.co/edit/Fmhs8xQupAynJfmwtk5y

<div class="btn-group" data-toggle="buttons">
                <label
                    class="power-toggle on btn btn-lg btn-success"

                >
                    <input (click)="onClick($event)" type="radio" name="power" value="power-on" autocomplete="off">
                        ON
                </label>

                <label
                    class="power-toggle off btn btn-lg btn-danger active"

                >
                    <input (click)="onClick('off')"  type="radio" name="power" value="power-off" autocomplete="off" checked>
                        OFF
                </label>
            </div>

Angular日志记录只需点击一次即可点击2次

1 个答案: