Javascript 角度4-内部使用ngModel（单击）

因此，我有以下html：

<div class="workflow-row">
    <input type="checkbox" id="new-workflow" [(ngModel)]="new_checkbox"> 
    <label>New Workflow</label>
    <input type="text" *ngIf="new_checkbox" placeholder="Enter Workflow Name">
</div>  
<div class="workflow-row">
    <input type="checkbox" id="edit-workflow" [(ngModel)]="edit_checkbox"> 
    <label>Edit Workflow</label>
    <select *ngIf="edit_checkbox"></select>
</div>

新工作流程
编辑工作流

我希望复选框像单选按钮一样工作，即：如果一个复选框被选中，那么另一个复选框将被选中。我试过了

<input type="checkbox" id="edit-workflow" (click)="new_checkbox.checked = false" 
[(ngModel)]="edit_checkbox">

---

但我得到一个错误，它说新的_复选框是未定义的。奇怪的是，

new\u checkbox

和

edit\u checkbox

在ngIf语句中工作，而不是在

（单击）

中工作。我做错了什么？

不要像编写常规的

javascript

而不是

(click)="new_checkbox.checked = false"

做点像

// .html
(click)="uncheckNewCheckbox()"

// .js or .ts
uncheckNewCheckbox() {
  this.new_checkbox.checked = false;
}

---

我建议您尝试以下方法：

组件。ts:

export class AppComponent {
    edit_checkbox = false;
    new_checkbox = true;

    dropNewValue() {
        this.new_checkbox = false;
    }

    dropEditValue() {
        this.edit_checkbox = false;
    }
}

然后在模板文件中，例如component.html，将模板稍微更改为：

<div class="workflow-row">
    <input type="checkbox" id="new-workflow" [(ngModel)]="new_checkbox" (ngModelChange)="dropEditValue()">
    <label>New Workflow</label>
    <input type="text" *ngIf="new_checkbox" placeholder="Enter Workflow Name">
</div>
<div class="workflow-row">
    <input type="checkbox" id="edit-workflow" [(ngModel)]="edit_checkbox" (ngModelChange)="dropNewValue()">
    <label>Edit Workflow</label>
    <select *ngIf="edit_checkbox"></select>
</div>

新工作流程
编辑工作流

---

我刚试过这个，效果很好。不过，我确实建议切换到单选按钮方法，因为您将获得相同的行为。

修复。不幸的是，我仍然得到同样的错误。它说组件类中不存在new_checkbox。这不是你的问题的一部分，你问为什么它不起作用，我告诉你为什么从你提供的信息中，也许也阅读了