為什么復選框事件狀態返回字符串“ 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（））