Question

在我的模板中，我有：

<input *ngIf="!radio" #chk [disabled]="loadingInProggress || !currentDimensionExists || !checkCurrentMetaID()" tabindex="-1"
        type="checkbox" (change)="checkboxChanged(chk.checked);" [(ngModel)]="active" class="dataset-checkbox" />

<div *ngIf="loadingCompleted && chk.checked" 
        class="colorSelector" 
        [(colorPicker)]="hexColor" (colorPickerChange)="colorPickerChange()"
        [ngStyle]="{'background':hexColor}">
</div>

我不能使用ngIf中的chk.checked来基于chk.checked的值进行选择。我在js控制台中收到此错误：

ERROR TypeError: Cannot read property 'checked' of undefined

这是为什么？

Answer 1

chk在这里定义：

<input *ngIf="!radio" #chk [...]>

如果radio为真，则此<input>不包含在DOM中，导致chk为undefined。

因此，chk.checked将在此提取物中产生错误：

<div *ngIf="loadingCompleted && chk.checked" [...]>

Answer 2

尝试：

*ngIf="loadingCompleted && chk?.checked"

Angular，在同一模板的其他位置使用模板变量不起作用

2 个答案: