Question

我有一个自定义复选框作为子组件，正在添加到父组件中。我正确通过了 ngModel ， name 等，并尝试使用以下命令更新 model 状态 true/false （基于使用 EventEmitter ）的复选框状态。

很遗憾，我的状态是 "on" 而不是 string < / p>

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

child.component.html：

"off"

child.component.ts ：

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

parent.component.html ：

@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 ); 
}

Answer 1

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

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

1 个答案: