时间戳

首页 > 解决方案 > 在设置模板变量之前检查 ngIf

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

问题描述

我的案例陈述基本上是

  1. 仅在可切换时才显示切换选项
  2. 如果它是可切换的，默认情况下选中该框。
  3. 如果它是可切换的并且他们选中该框，则仅显示 ng-template 的“if”部分。

我正在尝试做（如果重要，这在 ngFor 内）：

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

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

我也试过：

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

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

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

标签： angular

解决方案

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

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

推荐阅读