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

Question

我的案例陈述基本上是

1. 仅显示切换选项（如果它是可切换的
）
2. 如果它可以切换，默认情况下选中此框。
3. 仅显示＆＃39; if＆＃39; ng-template的一部分，如果它可以切换，他们会选中框。

我试图这样做（如果重要的话，这是在ngFor内）：

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

问题是它说无法读取属性。检查未定义。因为（我猜测）与我在那里的* ngIf有关。

我也尝试过：

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

虽然摆脱了错误，但无论我选中/取消选中该框，它都不会改变调用ng-template的哪个部分。我不确定为什么那不起作用，这就是为什么我在尝试这篇文章的第一部分。

寻找这些不起作用或任何替代方案的原因。谢谢！

Answer 1

* ngIf导致同一元素上的模板变量或子元素在空间中丢失，它在组件init中不存在，因此* ngIf＆lt; ed？元素之外的任何内容都不能引用它。使用css来隐藏输入应该解决这个问题：

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

Answer 2

我认为问题是在ngIf

中引用它时，输入元素上的ng-template将不存在

所以有两种方法可以解决它

解决方案1 ​​

在另一个元素中扭曲它并在该元素上移动ngIf

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

解决方案2

在ng-template中添加另一项检查以检查是否已定义toggleCheckbox

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