从具有ngIf指令的输入获取值时出错 [英] error in getting value from input that have ngIf directive

问题描述

单击提交按钮时出现异常错误TypeError和错误上下文。如果我将删除 ngIf 指令它将作为例外工作，Full StackTrace：

I get an exception Error TypeError and Error Context when the submit button is clicked. If I will delete the ngIf directive It will work as excepted, The Full StackTrace:

PlayerNameFormComponent.html:8 ERROR TypeError: Cannot read property 'value' of undefined
at Object.eval [as handleEvent] (PlayerNameFormComponent.html:8)
at handleEvent (core.js:13547)
at callWithDebugContext (core.js:15056)
at Object.debugHandleEvent [as handleEvent] (core.js:14643)
at dispatchEvent (core.js:9962)
at eval (core.js:12301)
at SafeSubscriber.schedulerFn [as _next] (core.js:4343)
at SafeSubscriber.__tryOrUnsub (Subscriber.js:240)
at SafeSubscriber.next (Subscriber.js:187)
at Subscriber._next (Subscriber.js:128)

PlayerNameFormComponent.html

<form (ngSubmit)="onSubmit(firstPlayer.value, secondPlayer.value)"> // The line that throws the exception

  <div class="input-field col s6">
    <label for="firstPlayer">First Player Name</label>
    <input #firstPlayer id="firstPlayer" name="firstPlayer" type="text" class="validate">
  </div>

  <div *ngIf="isMultiplePlayers" class="input-field col s6">
    <label for="secondPlayer">Second Player Name</label>
    <input #secondPlayer id="secondPlayer" name="secondPlayer" type="text" class="validate">
  </div>

  <button type="submit" class="waves-effect waves-light btn">Start</button>
</form>

PlayerNameFormComponent.ts

export class PlayerNameFormComponent {
  isMultiplePlayers = true;

 public onSubmit(firstPlayer: string, secondPlayer: string) {
   console.log(firstPlayer);
   console.log(secondPlayer);
 }

}

编辑：
我将表单标签更改为 - < form（ngSubmit）=onSubmit（firstPlayer？.value，secondPlayer？.value）> 和现在它打印控制firstPlayer输入值而不是secondPlayer值其打印 null

I changed my form tag to - <form (ngSubmit)="onSubmit(firstPlayer?.value, secondPlayer?.value)"> and now its print to console the firstPlayer input value and instead of secondPlayer value its prints null

感谢任何类型的帮助：）

Thanks for any kind of help :)

推荐答案

模板参考变量可以在模板中的任何地方访问，因此文档清楚地说明了。 本文 非常有助于理解结构化指令会发生什么，在这种情况下你的 * ngIf 。

Template reference variables can be accessed anywhere in template, so the docs state clearly. This article is very helpful to understand what happens with structular directives, in this case your *ngIf.

* ngIf 会发生什么，它会创建自己的模板，因此您可以在模板内访问模板参考，模板由 * ngIf 且仅在该范围内。

What happens with the *ngIf is that it creates it's own template, so your template reference is accessible inside the template, the template created by *ngIf and only in that scope.

以下摘自网站：

抛出错误的示例代码：

Sample code that throws error:

<div *ngIf="true">
  <my-component #variable [input]="'Do you see me?'>
</div>
{{ variable.input }}

原因是ngIf指令 - 或者与星号（*）一起使用的任何其他指令。这些指令是这样的称为结构指令，星形只是一个更复杂的东西的简短形式。每次使用结构指令（ngIf，ngFor，ngSwitchCase，......）时，Angular的视图引擎是desugaring（它消除了语法糖）两个星内的星步骤到以下最终形式（使用前面的ngIf作为示例）：

The reason for this is the ngIf directive - or any other directive used together with a star (*). These directives are so called structural directives and the star is just a short form for something more complex. Every time you use a structural directive (ngIf, ngFor, ngSwitchCase, ...) Angular's view engine is desugaring (it removes the syntactical sugar) the star within two steps to the following final form (using the previous ngIf as an example):

<ng-template [ngIf]="true">
...
</ng-template>`

<你注意到了吗？在包含结构指令的前一个HTML中出现了一些非同寻常的东西 - ng-template节点。这个节点是将模板引用变量的范围仅限于这个内部DOM部分的原因 - 它def里面有一个新模板。由于将变量限制在其定义模板中，因此在ng-template中定义的任何变量（这意味着在ngIf的DOM部分内）都不能在其外部使用。它不能越过模板的边界。

Did you notice? Something extraordinary emerged out of the previous HTML containing the structural directive - the ng-template node. This node is the reason for limiting the scope of the template reference variable to exactly this inner DOM part only - it defines a new template inside. Because of limiting a variable to its defining template any variable defined within the ng-template (and this means within the DOM part of the ngIf) cannot be used outside of it. It cannot cross the borders of a template.

---

但是如何解决你的根本问题，即获得价值......你几乎已经设置了模板驱动的表格，所以你可以这样做，或者然后采取反应方式：）

---

But how to solve your underlying problem, i.e getting the values... You almost have a template-driven form set up already, so you could do that, or then go the reactive way :)

这篇关于从具有ngIf指令的输入获取值时出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！