javascript - Angular 4 - 在内部使用 ngModel(点击)

Question

所以我有以下 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>

我希望复选框像单选按钮一样工作，即:如果选中一个，则另一个在 Angular 4 下变为未选中状态。我尝试这样做

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

但我收到一个错误，它说 new_checkbox 未定义。奇怪的是 new_checkbox 和 edit_checkbox 在 ngIf 语句内工作，但不在 (click) 语句内工作。我做错了什么？

Answer 1

我建议您尝试以下操作:

组件.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>

我刚刚尝试过这个，它有效。不过，我确实建议切换到单选按钮方法，因为您将获得相同的开箱即用行为。