Question

我有一个带有多个带有标签的div的表单-复选框-输入。当您打开菜单时，每个复选框都未被选中，这意味着每个输入都被禁用，然后您可以通过选中复选框并启用输入来决定要填写哪个输入。

因此，我遵循了this stack question，但在数组上收到未定义的错误。第一个复选框（索引[0]）始终有效，但随后的对象无效。

这是它的外观。

ngOnInit() {
    this.resetValues();
    ..........
    ......
    ...
}
    
resetValues() {
    this.checkboxArr = [
        { name: 'disabledDegree', disabled: true },
        { name: 'disabledEmployedTo', disabled: true },
        { name: 'disabledEmploymentType', disabled: true },
        { name: 'disabledSelOrg', disabled: true },
        { name: 'disabledSelMan', disabled: true }
    ];
    .......
    .....
    ..
}
    
checkSelected(name: string) {
    console.log('name', name);
    this.checkboxArr.forEach((x: any) => {
        if (x.name === name) {
            x.disabled = !x.disabled;
        }
    });
    console.log('loop', this.checkboxArr);
}

<div class="inner" *ngIf="checkboxArr && checkboxArr.length"> <-- adding this ngIf did nothing.
<div class="row">
    <div class="label-column">
        <label for="DegreeOfEmployment">...</label>
        <input type="checkbox" id="DegreeOfEmploymentCheckBox" name="DegreeOfEmploymentCheckBox" (change)="checkSelected(checkboxArr[0].name)">
    </div>
    <div class="input-column target-org-unit">
        <input [disabled]="checkboxArr[0].disabled" id="DegreeOfEmployment" name="DegreeOfEmployment" type="text" value="">
    </div>
</div>
<div class="row">
    <div class="label-column">
        <label for="EmployedTo">....</label>
            <input type="checkbox" id="EmployedToCheckBox" name="EmployedToCheckBox" (change)="checkSelected(checkBoxArr[1].name)">
        </div>
        <div class="input-column target-org-unit">
            <input [disabled]="checkBoxArr[1].disabled"  id="EmployedTo" name="EmployedTo" type="date" value="">                            
        </div>
    </div>
    <div class="row">
        <div class="label-column">
            <label for="EmploymentType">....</label>
            <input type="checkbox" id="EmploymentTypeCheckBox" name="EmploymentTypeCheckBox" (change)="checkSelected(checkBoxArr[2].name)">
        </div>
        <div class="input-column target-org-unit">
            <input [disabled]="checkBoxArr[2].disabled" id="EmploymentType" name="EmploymentType" type="text" value="">                            
        </div>
    </div>
</div>

Answer 1

即使HTML不是，Angular / JavaScript / TypeScript也区分大小写。使用checkBoxArr或checkboxArr。不要在ts / js或html文件中混用它。

角度5数组无法读取未定义的属性''

1 个答案: