不能在输入字段上使用 *ngIf

Question

每当我为 true 时，使用 *ngIf 结构指令有条件地提供输入字段。

<form>
  <input *ngIf='true' #inputName [(ngModel)]='log' name='ex1'/>
  <button  (click)='logMe(inputName.value)'>Click</button>
</form>

其中inputName未定义，并显示错误。在此 plunkr 中重新创建错误：此处。

我不明白为什么会出现此错误，因为 *ngIf 中的条件为真。这意味着输入字段的 DOM 元素已创建，当我们在输入字段中输入某些内容时，我们可以看到模型正在更新。但是，抛出的错误表明输入字段甚至不存在。

堆栈跟踪：

EXCEPTION: Error in ./App class App - inline template:3:2 caused by: Cannot read property 'value' of undefined
ErrorHandler.handleError @ core.umd.js:3064
next @ core.umd.js:8041
schedulerFn @ core.umd.js:3689
SafeSubscriber.__tryOrUnsub @ Subscriber.ts:238
SafeSubscriber.next @ Subscriber.ts:190
Subscriber._next @ Subscriber.ts:135
Subscriber.next @ Subscriber.ts:95
Subject.next @ Subject.ts:61
EventEmitter.emit @ core.umd.js:3675
NgZone.triggerError @ core.umd.js:4040
onHandleError @ core.umd.js:4001
ZoneDelegate.handleError @ zone.js:246
Zone.runTask @ zone.js:154
ZoneTask.invoke @ zone.js:345
core.umd.js:3066 ORIGINAL EXCEPTION: Cannot read property 'value' of undefined
ErrorHandler.handleError @ core.umd.js:3066
next @ core.umd.js:8041
schedulerFn @ core.umd.js:3689
SafeSubscriber.__tryOrUnsub @ Subscriber.ts:238
SafeSubscriber.next @ Subscriber.ts:190
Subscriber._next @ Subscriber.ts:135
Subscriber.next @ Subscriber.ts:95
Subject.next @ Subject.ts:61
EventEmitter.emit @ core.umd.js:3675
NgZone.triggerError @ core.umd.js:4040
onHandleError @ core.umd.js:4001
ZoneDelegate.handleError @ zone.js:246
Zone.runTask @ zone.js:154
ZoneTask.invoke @ zone.js:345
core.umd.js:3069 ORIGINAL STACKTRACE:
ErrorHandler.handleError @ core.umd.js:3069
next @ core.umd.js:8041
schedulerFn @ core.umd.js:3689
SafeSubscriber.__tryOrUnsub @ Subscriber.ts:238
SafeSubscriber.next @ Subscriber.ts:190
Subscriber._next @ Subscriber.ts:135
Subscriber.next @ Subscriber.ts:95
Subject.next @ Subject.ts:61
EventEmitter.emit @ core.umd.js:3675
NgZone.triggerError @ core.umd.js:4040
onHandleError @ core.umd.js:4001
ZoneDelegate.handleError @ zone.js:246
Zone.runTask @ zone.js:154
ZoneTask.invoke @ zone.js:345
core.umd.js:3070 TypeError: Cannot read property 'value' of undefined
    at CompiledTemplate.proxyViewClass.View_App0.handleEvent_5 (VM5226 component.ngfactory.js:189)
    at CompiledTemplate.proxyViewClass.eval (core.umd.js:12399)
    at HTMLButtonElement.eval (platform-browser.umd.js:3224)
    at ZoneDelegate.invokeTask (zone.js:275)
    at Object.onInvokeTask (core.umd.js:3971)
    at ZoneDelegate.invokeTask (zone.js:274)
    at Zone.runTask (zone.js:151)
    at HTMLButtonElement.ZoneTask.invoke (zone.js:345)
ErrorHandler.handleError @ core.umd.js:3070
next @ core.umd.js:8041
schedulerFn @ core.umd.js:3689
SafeSubscriber.__tryOrUnsub @ Subscriber.ts:238
SafeSubscriber.next @ Subscriber.ts:190
Subscriber._next @ Subscriber.ts:135
Subscriber.next @ Subscriber.ts:95
Subject.next @ Subject.ts:61
EventEmitter.emit @ core.umd.js:3675
NgZone.triggerError @ core.umd.js:4040
onHandleError @ core.umd.js:4001
ZoneDelegate.handleError @ zone.js:246
Zone.runTask @ zone.js:154
ZoneTask.invoke @ zone.js:345
core.umd.js:3073 ERROR CONTEXT:

Answer 1

这是您的工作版本：

import { Component, NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { NgForm } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
@Component({
  selector: 'my-app',
  template: `
            <div>
            <form #f="ngForm"> 
              <button (click)="log(name)">Click me</button>
              <input *ngIf="true" name="name" [(ngModel)]="name" />
            </form>
            </div>
          `,
})
export class App {
  name: string;
  log: string;
  constructor() {
    this.name = 'Angular2'
  }
  logMe(s) {
    this.log = s;
  }
}
@NgModule({
  imports: [BrowserModule, FormsModule, CommonModule],
  declarations: [App],
  bootstrap: [App]
})
export class AppModule { }