Angular记录一次点击2次

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

您需要将点击功能绑定到输入而不是标签。

请在此处找到 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次

Angular logging click 2 times on one click

forms

mouseclick-event

angular