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

Question

我的案例陈述基本上是

仅当切换

1. 选项可切换时才显示
2. 如果可切换，则默认选中该框。
3. 仅显示ng模板的"if"部分，如果它可以切换并且他们选中了该框。

我正在尝试这样做(如果重要的话，这是在 ngFor 内(：

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

问题是它说无法读取属性.checkof undefined。因为(我猜(与 *ng 有关如果我在那里。

我也试过：

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

虽然这消除了错误，但无论我是否选中/取消选中该框，它都不会更改调用 ng 模板的哪个部分。我真的不确定为什么这不起作用，这就是我尝试这篇文章的第一部分的原因。

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

Answer 1

我相信问题是在输入元素上使用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 模板中添加另一个检查以检查是否定义了toggleCheckbox

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

Answer 2

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

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