Question

当我单击按钮时，我试图访问输入字段的值并将其传递给方法。这里的问题是，在第一种情况下，输入字段的范围仅限于mat-form-field。 stackblitz DEMO

  <mat-form-field *ngIf="bool">
   <input matInput #input placeholder="Enter 1st input">
  </mat-form-field>
  <button click=someMethod(input?.value)>Submit</button>

someMethod（）将没有值

如果我尝试在没有* ng的情况下执行相同的操作，那么它将起作用，并且我能够全局访问该值。

  <mat-form-field>
   <input matInput #input2 placeholder="Enter 2nd input">
  </mat-form-field>

  <button click=someMethod(input2?.value)>Submit</button>

在这种情况下，someMethod（）将接收值

在演示中，我能够使用viewChild访问该值，但是我想知道为什么如果我使用ngIf却无法访问该值。提前致谢。注意：我不是在寻找替代方法，我想知道第一种方法有什么问题。

Answer 1

您可以阅读Thomas Hilzendegen的this blog post，以了解发生了什么。

template reference variable的范围是定义它的模板。在您的第二个代码示例中，没有应用任何ngIf条件，变量input2在模板中的任何位置都可用。

但是，当使用*ngIf指令时，变量input实际上是在该指令创建的内部模板中定义的。这是与您的第一个示例相对应的已删除标记：

<ng-template [ngIf]="bool">
  <mat-form-field>
    <input matInput #input placeholder="Enter 1st input">
  </mat-form-field>
</ng-template>
<button click=someMethod(input?.value)>Submit</button>

您看到变量input的定义在内部模板内部，但是按钮试图在未定义的模板外部访问它。

This stackblitz显示了条件指令中定义的变量的有限范围。

Answer 2

经过一些挖掘，发现在* ngIf内部声明的变量不能在* ngIf外部使用，因为根据https://github.com/angular/angular/issues/6179#issuecomment-233579605的讨论，设计不支持该变量。替代方法是使用ViewChild或隐藏或添加ngClass来有条件地显示none和类似https://angular-pqfaa5-we74s5.stackblitz.io

的元素块

对于带有材质

2 个答案: