Question

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

@Input() addressAssociation: AccountAssociation;

有： address: Address;

内部地址中有一个我要绑定的属性，即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>

问题是，当模板加载时，它总是会抛出错误：Cannot read property errors of undefined。

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

问题是显然变量#addState没有填充ngModel关于如何解决这个问题的任何想法？

Answer 1

更新回答：

您有一个范围问题。您正在#addState内分配*ngIf。然后你引用了addState的{{1}}外部。这不起作用 - 模板变量只能在创建它的同一范围内使用。尝试在*ngIf内移动您的错误测试div。把它放在*ngIf

下面

旧回答：

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

</select>

Answer 2

我相信您的错误来自此代码

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

尝试将addState添加到ngIf

*ngIf="addState && addState.errors && addState.touched"

在组件加载时未定义addState，因此addState.errors会产生该错误

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

2 个答案: