webComponent Stenciljs的问题输入复选框在angular响应式表单我没有接收布尔值

Question

这是我的stenciljs输入复选框组件，当我在一个reciveForm中使用这个组件时，我接收倒置的值，而不是布尔值，而是字符串。问题是什么，如果你在一个angular响应式表单中实现它，你会收到正确的console .log，但formgroup。值是不为真并且是反转的并且是string而不是布尔

import { Component, Event, EventEmitter, h, Prop } from '@stencil/core'
@Component({
tag: 'my-checkbox',
styleUrl: 'my-checkbox.css',
})
export class PnkCheckbox {
@Prop({ mutable: true, reflect: true }) value = ''
@Prop({ mutable: true, reflect: true }) checked = false
@Prop() disabled = false
@Event() changed: EventEmitter<boolean>
handleChange(ev) {
const target = ev.target as HTMLInputElement
this.value = target.checked.toString()
console.log('value:', this.value)
this.checked = target.checked
console.log('checked:', this.checked)
this.changed.emit(this.checked)
}
render() {
return (
<div>
<input
type="checkbox"
onChange={(ev) => this.handleChange(ev)}
disabled={this.disabled}
checked={this.checked}
value={this.checked.toString()}
></input>
<span>
<slot />
</span>
</div>
)
}
}   

<代码>

Answer 1

可能您在传入值时忽略了[]，checked="true"将传递一个字符串，[checked]="true"将传递一个布尔值