Question

我正在尝试在Angular 2+ as done here in angularjs中的第二次单击上取消选中单选按钮。我有一个使用* ngFor显示的对象数组，因此我以一种形式具有多个单选按钮组。我需要一个可以取消选中所述单选按钮的实现/我尝试过的所有实现都会不断检查和取消选中多个按钮，而其他实现则根本无法工作。

This is my current code right now.如何使用打字稿在第二次点击时取消选中单选按钮？

Answer 1

您需要将单选值绑定到ngModel，然后监听ngModelChange或click事件而不是change。

此答案也可能为您提供帮助https://stackoverflow.com/a/42447116/4544288

Answer 2

请尝试使用更多单选按钮来输入代码。效果很好，再次单击该按钮，您可以尝试取消选择该单选按钮吗？我的意思是您的stackblitz代码： stackblitz.com/edit/angular-bootstrap4-jo5acq。

Answer 3

如果你不想使用 ngModel 那么你可以使用以下方法

<div *ngFor="let item of items">
    <label>
        <input
            #radioInput
            type="radio"
            [value]="item.id"
            [checked]="item.checked"
            (input)="onChange(item, radioInput)"
        />
        <span>{{ item.label ? item.label : item.labelKey }}</span>
    </label>
</div>

并在 .ts 文件中


onChange(chosenItem: FieldRadioItem, inpCheckbox: HTMLInputElement) {

    inpCheckbox.checked = !inpCheckbox.checked;
    ...
}

类 FieldRadioItem 仅包含字段 id、label 和 checked。在 Angular 11 上测试

如何取消选中第二个单选按钮Angular 2+

3 个答案: