不能绑定宽度，即使它是@Input

Question

自定义复选框已 [checked] 作为 @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（简单 :-)）：

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

}

看起来很简单，但是??预先感谢您的建议。

Answer 1

来自 MDN 此处：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-checked

checked When the value of the type attribute is radio or checkbox, the presence of this Boolean attribute indicates that the control is selected by default, otherwise it is ignored.

据此我假设 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)" />

不能绑定宽度，即使它是@Input

can't bind width even though it is @Input

checkbox

controls

initialization

angular