为什么复选框事件状态返回字符串“ on”而不是true / false？

Question

我有一个自定义复选框作为子组件，正在添加到父组件中。 我正确地传递了ngModel ， name等，并尝试使用EventEmitter根据复选框状态使用状态为true/false来更新model 。

不幸的是，我得到的状态是"on"为string而不是boolean

通过Chrome控制台，我可以跟踪状态和event 。 它工作正确，并给出了预期的结果。 只是model和双向绑定获得一个字符串值，在我的情况下，它为"on" ，即使我取消选中该复选框，它也保留该字符串。 换句话说，甚至没有"off"

child.component.html：

<input type="checkbox"
        name="{{passCheckBoxName}}" 
        #ngForm="ngModel"
        [ngModel]="model" 
        (ngModelChange)="onChange($event)"
        required>

child.component.ts ：

@Input() model: boolean;
@Output() modelChange: EventEmitter<any> = new EventEmitter();

onChange(event) {
    console.log('this.model: ' + ${this.model});
    this.model = event;
    // event.checked doesn't work for me. output then is undefined
    // this.model = event.checked;
    console.log(event);
    this.modelChange.emit( event ); 
    // event.checked doesn't work for me. output then is undefined
    // this.modelChange.emit( event.checked ); 
}

parent.component.html ：

<child-checkbox [parentFormGroup]="form"
                [name]="'nameOfCheckbox'"
                [ngModel]="name"" 
                ngDefaultControl>
</child-checkbox>

Answer 1

我已经为您完成了一些代码： https : //stackblitz.com/edit/angular-odkm2n?file= src%2Fapp%2Fhello.html模型值在此处为布尔值1.为什么仅使用复选框创建子组件？ 2.为什么在事件未将Input（）带入子组件时将其与“模型”一起使用？ （也用于Output（））