Angular 即使是@Input，也无法绑定宽度

自定义复选框将[选中]作为@Input属性。无论它们是未定义的、true还是false，屏幕上的复选框始终处于选中状态。 HTML-顺便说一句，它们位于无序列表中，并且不在表单中

<checkbox id="UpperCaseLetter" #chkb [checked]="true" [disabled]="false">Upper Case Letter</checkbox>
<checkbox id="LowerCaseLetter" #chkb >Lower Case Letter</checkbox>
<checkbox id="NumericDigits" #chkb [checked]="false">Numeric Digits</checkbox>
<checkbox id="NonAlphanumericChars" #chkb [checked]="true">Non-Alphanumeric Chars</checkbox>

复选框HTML simple:-：

<input type="checkbox"
   checked="{{checked}}"
   [disabled]="isDisabled"
   (change)="onChange($event)" />
<span><ng-content></ng-content></span>

Checkbox.component.ts-正如您所看到的，我已经尝试将内容移动到AfterInit，但没有任何效果

import {AfterViewInit, Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {ElementState, PageMgrService} from '../page-mgr.service';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';

@Component({
  selector: 'checkbox',
  templateUrl: './checkbox.component.html',
  styleUrls: ['./checkbox.component.scss']
})
export class CheckboxComponent implements OnInit, AfterViewInit {
  @Input() id: string;
  @Input() checked: boolean;
  @Input('disabled') isDisabled: boolean;
  @Output('onChange') onChangeEvent = new EventEmitter;
  FSubj: BehaviorSubject<ElementState>;
  value: boolean;
  InstanceId = 'PasswordConfigAdmin';
  constructor(private pagMgr: PageMgrService) {
    this.InstanceId = pagMgr.GetUniquePageId();
    this.FSubj = pagMgr.GetSubject();
  }

  ngOnInit() {
    this.value = (this.checked === null || this.checked === undefined || this.checked === false ? false : true);
  }

  ngAfterViewInit() {
    this.checked = (this.checked === null || this.checked === undefined || this.checked === false ? false : true);
    this.controlChanged(this.id, this.checked);
  }

  getValue(): boolean {
    return this.value;
  }

  setValue(val: boolean) {
   this.value = val;
   this.checked = val;
  }

  setDisabled(val: boolean) {
    this.isDisabled = val;
  }

  onChange($event) {
    this.value = $event.target.checked;
    this.controlChanged(this.id, this.value);
  }

  controlChanged(ctrl: string, arg: any) {
    const elt = new ElementState();
    elt.controlId = ctrl;
    elt.value = arg;
    elt.instance = this.InstanceId;
    this.FSubj.next(elt);
  }

}

看起来很直截了当，但是？？提前感谢您的建议。

来自MDN：

当type属性的值为radio或checkbox时选中，则 此布尔属性的存在表示控件是 默认情况下选择，否则将忽略该选项

我会据此假设HTML应该是这样检查的：

<input type="checkbox"
   checked
   [disabled]="isDisabled"
   (change)="onChange($event)" />

或者，对于未选中的：

<input type="checkbox"
   [disabled]="isDisabled"
   (change)="onChange($event)" />

您可以通过以下方式实现您的目标：

<input *ngIf='checked' type="checkbox"
   checked
   [disabled]="isDisabled"
   (change)="onChange($event)" />
<input *ngIf="!checked" type="checkbox"
   [disabled]="isDisabled"
   (change)="onChange($event)" />

对于您的输入，请尝试[选中]=选中