ngIf在设置模板变量之前被检查

Question

My case statement is basically

1. Only show the toggle option if it's toggleable
2. If it's toggleable, by default check the box.
3. Only show the 'if' part of the ng-template if it's toggleable and they check the box.

I'm trying to do (this is within an ngFor if it matters):

<input *ngIf="data.isToggleable" #toggleCheckbox type="checkbox" [checked]="true" />
<ng-template [ngIf]="!data.isToggleable || (data.isToggleable && toggleCheckbox.checked)" [ngIfElse]="elseTemplate">

Problem is it says cannot read property .checked of undefined. Because (I'm guessing) of something to do with the *ngIf I have there.

I also tried:

<input *ngIf="data.isToggleable" #toggleCheckbox type="checkbox" [checked]="true" />
<ng-template [ngIf]="!data.isToggleable || (toggleCheckbox && toggleCheckbox.checked)" [ngIfElse]="elseTemplate">

and while that got rid of the error, no matter if I checked/unchecked the box, it wouldn't change what part of the ng-template was called. I'm not really sure why that didn't work which is why I was trying the first part of this post.

Looking for a reason these aren't working or just any alternative. Thanks!

Answer 1

*ngIf causes template variables on the same element or children to be 'lost in space', it doesn't exist at component init so nothing outside the *ngIf'ed element can refer to it. Using css instead to hide the input should fix this:

<input [style.display]="data.isToggleable ? 'block' : 'none'" #toggleCheckbox type="checkbox" [checked]="true" />

Answer 2

I believe the issue is by using ngIf on input element won't exists while you are referencing it in ng-template

so there are two ways of fixing it

Solution 1

Warp it in another element and move ngIf on that element

<div *ngIf="data.isToggleable">
    <input #toggleCheckbox type="checkbox" [checked]="true" />
        <ng-template [ngIf]="!data.isToggleable || (data.isToggleable && toggleCheckbox.checked)" [ngIfElse]="elseTemplate">
</div>

Solution 2

adding another check in ng-template to check if toggleCheckbox is defined

<input *ngIf="data.isToggleable" #toggleCheckbox type="checkbox" [checked]="true" />
<ng-template [ngIf]="!data.isToggleable || (data.isToggleable && toggleCheckbox && toggleCheckbox.checked)" [ngIfElse]="elseTemplate">