Angular 从另一个元素传递模板引用会给出未定义的ngIf

我试图通过为每个输入定义模板引用并将其传递给验证器函数来验证每个键笔划上的两个值。然而，由于某些原因，不是来自调用输入的ref总是返回“undefined”

它看起来像这样：

模板：

<input type="text" *ngIf="oneCondition" placeholder="Key" (keyup)="validateInput(keyElement, valueElement)" #keyElement />
<input type="text" *ngIf="oneCondition" placeholder="Value" #valueElement />

结果是：

划船​ 未定义

如果我将

（keyup）

放在第二个元素上，也会发生同样的情况，在这种情况下，第一个元素显示为未定义。为了以防万一，我尝试为这些元素创建ViewChildren，但它也不起作用（而且可能不相关）

然而，如果没有条件（ngIf），它似乎是有效的。这是为什么？这个问题可以消除吗？

原因是，

\valueElement

和

\keyElement

在应用

*ngIf

的元素之外不可用。为了克服这种情况，您需要用

包围您的输入，并将

*ngIf

应用于模板。 然后在模板内部，使用输入元素

<ng-template [ngIf]="oneCondition">
  <input type="text" placeholder="Key" (keyup)="validateInput(keyElement, valueElement)" #keyElement />
  <input type="text" placeholder="Value" #valueElement />
</ng-template>

---

现在问题已经清楚了，我想我可以提供一个我认为足以解决这个问题的建议

正如您在添加

ngIf

后已经知道的，如果条件为false，元素模板引用将不可用，这是完全可以预料的。因为

ngIf

会完全删除整个元素

而不是在

ngIf

为false时找到解决方法使元素引用仍然可用。我建议重新考虑一下，当元素从UI中移除时，为什么仍然需要引用？因为这在逻辑上似乎没有意义

更好的方法是检查引用的可用性，并相应地编写逻辑代码

public validateInput(key, value): boolean {
  if (!value) {
    console.log('value input is not available, condition false, do something else');
  } else {
    console.log('value input is available, process input fields', key, value);
  }
}

---

我认为这个问题是由其他原因引起的。我放了一个Stackblitz演示，你们可以看到它得到了2个元素的引用@欣安：谢谢你说的对，也许我只是把问题简化得太多了。我对问题进行了编辑，以反映这一变化。我想如果没有ngIf，它会工作，但是当添加ngIf（注意：这是相同的条件）时，有些东西会中断。你知道为什么会这样吗？谢谢你的回答。如果输入不是同级/在同一位置，是否可以执行此操作？您可以使用ViewChild访问任何DOM元素是的，但验证器有不同的职责，不应该使用这些变量。我可以添加一个包装器作为解决方法，但如果知道是否可以在模板端这样做，那就太好了。如果不可能，也可以：）如果验证多个字段是您的想法，那么您可以使用模板驱动验证或反应式表单验证。请参阅@Ynhockey上的文档，您的问题的答案是否定的。答案不可能是否定的，但这不是我的情况。在我的例子中，当调用validate函数时，ngIf总是计算为true。此外，虽然我可以执行您建议的检查，但在我的情况下，多次调用验证器是没有意义的，不仅仅是因为keyup事件，也不仅仅是因为这些输入。其思想是，当调用它时，值应该始终存在。基本上安吉拉的建议就是我想要的，但我也想澄清一些事情。

public validateInput(key, value): boolean {
  if (!value) {
    console.log('value input is not available, condition false, do something else');
  } else {
    console.log('value input is available, process input fields', key, value);
  }
}