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

自定义复选框已作为@Input属性进行检查。无论它们是未定义的，“真”还是“假”，屏幕上的复选框都会被检查。 HTML - 顺便说一句，他们在无序列表中，他们不是在一个窗体中。无法绑定宽度，即使它是@Input

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

}

似乎挺直，但??预先感谢您的建议。

来源

2017-08-09 Yogi Bear

为您的'输入'尝试'[检查] =“检查” – jmw5598

从MDN这里：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-checked

检查当类型属性的值是无线电或复选框，则存在此布尔属性的指示控制是默认选择，否则将被忽略。

我想通过这个假设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)" />

来源

2017-08-09 18:14:58 DeborahK

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

回答

相关问题