html - Angular 2+：输入装饰器不反映复选框

Question

我有一个组件

时间框选择器 HTML：

<input type="checkbox" [(ngModel)]="selected">

TS：

@Component({
   ...
})
export class TimeboxComponent implements OnInit {
    @Input() selected: boolean;

    constructor() {}

    ngOnInit() {
        console.log('Selected: ', this.selected);
    }
}

现在，当我创建

<app-timebox selected="false"><app-timebox/>
<app-timebox selected="true"><app-timebox/>

在这两种情况下，复选框最初都显示为选中状态。为什么会这样，我该如何解决？

标签： htmlcssangularcheckboxangular2-forms

Answer 1

在这两种情况下，您都在绑定非空字符串，它们是真实值。使用方括号表示法告诉 Angular 绑定值将作为 Javascript 表达式进行计算：

<app-timebox [selected]="false"><app-timebox/>
<app-timebox [selected]="true"><app-timebox/>