javascript - 来自 @Input 时，将 ngModel 分配给属性是未定义的

Question

我有一个具有以下输入属性的组件。

@Input() 地址关联:AccountAssociation；

其中有: 地址:地址；

在地址内部有一个我想要绑定(bind)的属性，它是 stateCode。

在我的模板中，我有这个:

<div class="fcol-md-4 fcol-xs-12 form-group" *ngIf="!zipCodeValidating && addressAssociation.address">
  <label for="{{name}}State" class="uk-label">State / U.S Territory</label>
  <select [(ngModel)]="addressAssociation.address.stateCode" 
    [disabled]="isListedZipCode"
    #addState="ngModel"
    required>
    <option [ngValue]="state.abbreviation" *ngFor="let state of states">{{state.fullName}} ({{state.abbreviation}})</option>
  </select>
</div>

<div class="text--error" *ngIf="addState.errors && addState.touched">
    <span *ngIf="addState.errors.required">State is required.</span>
</div>

问题是，当模板加载时，它总是抛出一个错误:无法读取未定义的属性错误。

此外，我尝试使用 {{addState | 打印变量json}} 但抛出循环引用错误。而且，只是尝试打印 addState，即使退出禁用状态并更改其值，它也从未改变。

问题是，显然变量#addState没有被ngModel填充，关于如何解决这个问题有什么想法吗？

Answer 1

更新的答案:

您遇到范围界定问题。您正在分配 #addState里面 *ngIf 。然后你引用 addState除此之外*ngIf 。这是行不通的——模板变量只能在它创建的同一范围内可用。尝试将错误测试 div 移到 *ngIf 内。将其放在 </select> 的正下方

旧答案:

您应该使用安全导航操作符 ( https://angular.io/guide/template-syntax#safe-navigation-operator )

<div class="text--error" *ngIf="addState?.errors && addState?.touched">
    <span *ngIf="addState?.errors.required">State is required.</span>
</div>