从具有 ngIf 指令的输入中获取值时出错

Question

单击提交按钮时出现异常Error TypeError and Error Context。如果我将删除 ngIf 指令，它将作为例外工作，完整的 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)">，现在它的 print 用于控制台 firstPlayer 输入值，而不是 secondPlayer 值，它的 prints null

感谢您的任何帮助:)

Answer 1

模板引用变量可以在模板中的任何位置访问，因此文档说明清楚。 This article 非常有助于理解结构指令会发生什么，在这种情况下是您的 *ngIf。

*ngIf 发生的情况是它创建了自己的模板，因此您的模板引用可在模板内访问，该模板由 *ngIf 创建并且仅在该范围内。

以下是网站的摘录：

引发错误的示例代码：

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

原因是 ngIf 指令 - 或与星号 (*) 一起使用的任何其他指令。这些指令被称为结构指令，星号只是更复杂事物的缩写形式。每次使用结构指令（ngIf，ngFor，ngSwitchCase，...）时，Angular 的视图引擎都会在两步内对星号进行脱糖（它删除语法糖）到以下最终形式（以前面的 ngIf 为例）：

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

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

---

但是如何解决你的潜在问题，即获取值......你几乎已经设置了一个模板驱动的表单，所以你可以这样做，或者然后采用反应方式:)

Answer 2

您的问题并非来自您的*ngIf。尝试使用 Elvis 运算符暂时消除错误：

onSubmit(firstPlayer?.value, secondPlayer?.value)

或者您可以确保在您的 onSubmit 中 HTML 元素 firstPlayer 和 secondePlayer 返回 HTMLObject。

进入你的组件，这样做：

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

在您的 HTML 模板中，将 (ngSubmit) 行更改为：

<form (ngSubmit)="onSubmit(firstPlayer, secondPlayer)">

如果结果是更正，你会得到......

<input id="firstPlayer" name="firstPlayer" type="text" class="validate">
...

...进入控制台。

如果真的是未定义，使用[ngModel]="firstPlayer"，检查是否仍然出现错误。