Question

在尝试通过模板引用变量引用NgModel指令时，我看到“无法读取属性'有效'未定义”错误 - 但仅当它包含在*ngIf中时。

以下是展示问题的示例表单：

<form (ngSubmit)="true">
  <div [ngClass]="dom_email_ok.valid ? 'one' : 'two'">
    <span><input [(ngModel)]="email" #dom_email_ok="ngModel" required name="email" /></span>
  </div>
  <div [ngClass]="dom_email_bad.valid ? 'one' : 'two'">
    <span *ngIf="true"><input [(ngModel)]="email" #dom_email_bad="ngModel" required name="email" /></span>
  </div>
</form>

以下是Plunker：http://plnkr.co/edit/3xrqCVv7qE1FQjdTdzXP

这适用于第一个input。尝试根据input中包含的*ngIf设置类时发生错误：

TypeError: Cannot read property 'valid' of undefined
    at CompiledTemplate.proxyViewClass.View_App0.detectChangesInternal (/AppModule/App/component.ngfactory.js:259:51)
    at CompiledTemplate.proxyViewClass.AppView.detectChanges (https://unpkg.com/@angular/core/bundles/core.umd.js:12726:18)

具体来说，生成的代码对于有效的代码看起来像这样：

var currVal_8_0_0 = (self._NgModel_11_7.context.valid? 'one': 'two');

...对于那个不起作用的人来说，它看起来像这样：

var currVal_14_0_0 = (self.context.dom_email_bad.valid? 'one': 'two');

在此功能中，self.context是组件本身，因此没有dom_email属性（仅name和email）。

Answer 1

你不能在* ngIf之外使用在* ngIf内声明的变量。

但你可以用这个：

<div>
  <h2>Hello {{name}}</h2>
  <form (ngSubmit)="true">
    <div [ngClass]="dom_email_ok.valid ? 'one' : 'two'">
      <span><input [(ngModel)]="email" #dom_email_ok="ngModel" required name="email" /></span>
    </div>
    <div [ngClass]="dom_email_bad.valid ? 'one' : 'two'" *ngIf="true">
      <span ><input [(ngModel)]="email" #dom_email_bad="ngModel" required name="email" /></span>
    </div>
  </form>
</div>

当使用ngIf指令

1 个答案: